Ionic-framework: ion-select multiple won't update if ngModel is changed elsewhere

Created on 15 Feb 2017 · 12Comments · Source: ionic-team/ionic-framework

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
If you change the contents of an ion-select multiple's ngModel to something that would still be considered valid, it does not update the ion-select; so if you have an array of numbers as the ngModel and you push a number into it outside of the page's constructor, the option equivalent to it will not be checked.

Expected behavior:
Changing the content of the ngModel, regardless of where, should update the ion-select, as happens when the multiple option is not used.

Steps to reproduce:
Create an ion-select multiple, use two-way data binding on the ngModel and push valid data onto the ngModel array; if done outside the constructor, the ion-select will not update, becoming inconsistent with the ngModel.

Related code:
I've set up a plunker example here

Other information:
The issue only happens with ion-select multiple; on ion-select, any changes to the ngModel are reflected correctly.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):
Cordova CLI: 6.3.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.1.7
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v6.9.4
Xcode version: Not installed

Source

AleFons

Most helpful comment

I've the same issue.
The workaround that I've create is to define some boolean variable on top.
For example:
this.isVisible = false;

Before update the ngModel or the options data I set this.isVisible to false.
After that in setTimeout without milliseconds I've update that variable like this:

setTimeout(() => this.isVisible = true);

and in the template I have:

<ion-item *ngIf="isVisible">
  <ion-select [(ngModel)]="......">
    <ion-option *ngFor=".........">....</ion-option>
  </ion-select>
</ion-item>

The important thing here is: *ngIf="isVisible"

Vatsov on 30 Jun 2018

👍5

All 12 comments

Thanks for using Ionic, we will look into this!

jgw96 on 15 Feb 2017

Any update on this one?

joshterrill on 20 Apr 2017

👍2 👎1

I believe I've found a workaround of sorts, but I haven't actually tested it; I've run into a similar issue recently where a ion-button's wasn't updating basing on a change in the model. Basically:

import { NgZone } from '@angular/core';

zone : any = new NgZone({ enableLongStackTrace: false });

this.zone.run(() => {
    //code that changes the ion-select's array
});

I haven't actually tested this on this specific issue, but I'll get back to you when I have.

AleFons on 20 Apr 2017

Alas, it didn't work. I thought it involved the model being changed and no change detection running, but it seems like either that was not the case or I did it wrong. Guess we'll have to wait for an official fix.

AleFons on 20 Apr 2017

any updates?
model change is not detected by ion-select.

bhaveshvyas007 on 3 Nov 2017

I think the problem is related with the thing that model isn't used for ion-select it is just updated when ion-select alert is closed. The problem is there even when one has initial values in a model. So it is obvious that ion-select do not use ngModel list. I would like to see a solution for this.

svojislav on 5 Jan 2018

@svojislav I don't know if that's true. According to the documentation, [(ngModel)] can go in an ion-select component.

Documentation link to ion-select: https://ionicframework.com/docs/components/#select

joshterrill on 9 Jan 2018

Any update on this? I think I have an issue which stems from the same bug where I'm filtering the ion-options using a pipe, and the option content doesn't update when the pipe is executed.

MumblesNZ on 13 Feb 2018

I've the same issue.
The workaround that I've create is to define some boolean variable on top.
For example:
this.isVisible = false;

Before update the ngModel or the options data I set this.isVisible to false.
After that in setTimeout without milliseconds I've update that variable like this:

setTimeout(() => this.isVisible = true);

and in the template I have:

<ion-item *ngIf="isVisible">
  <ion-select [(ngModel)]="......">
    <ion-option *ngFor=".........">....</ion-option>
  </ion-select>
</ion-item>

The important thing here is: *ngIf="isVisible"

Vatsov on 30 Jun 2018

👍5

@Vatsov Thanks, work for me in ionic 4.

Any update on this one?

erodrigues-dev on 8 Nov 2018

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!