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

[ionitron-bot[bot]]

Original issue by @AleFons on 2017-02-15T13:21:22Z

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

[li-boxuan]

Is it fixed in v4?

[pedrocruzlopez]

Use ionic-selectable, seems that there is no solution so far for the native ion-select

[ericgopak]

Experiencing the same issue with Ionic 5 :/

Edit: a ridiculous but effective workaround was suggested here.

[bogdanbaghiu]

Hello

I have found a possible solution for this problem.

The first thing is to reference the ion-select component with some id, for example, if they have several they put the same id.

• Example file.html

<ion-select #is multiple="false" formControlName="aircraft" (ngModelChange)="onChangeAircraft($event)">
            <ion-select-option *ngFor="let aircraft of aircraftList" value="{{aircraft.id}}">
              {{aircraft.name | titlecase}}</ion-select-option>
</ion-select>

Then with the ViewChild they will recover it and in the ts they put the following:

• Example file.ts

 @ViewChildren('is') ionSelects: QueryList<IonSelect>;
  ....
  constructor() {}

  ionViewWillEnter() {
      this.ionSelects.map(ion => {
           ion.value = null;
           ion.selectedText = null;
      });
  }

This is a temporal solution.