[4.0.0] ion-select interface="action-sheet" not refreshing the items according to the updated model

[frenmanoj]

Bug Report

Ionic version:
4.0.0

Current behavior:
The ion-select action sheet correctly renders the initial list of items. But if an item is removed programmatically from the model, the action-sheet interface doesn't reflect that. That is, if you click on the dropdown to open the action-sheet interface, it still contains the deleted item in the list.

Expected behavior:
The ion-select action sheet interface does not display the deleted item from the model.

Steps to reproduce:
Let's say I have a select dropdown defined as below. When an item is removed by click on Delete Color button, the model colors get updated. But if we click on the dropdown, the action-sheet interface still shows the delete color.

*.html

  <ion-select interface="action-sheet" [(ngModel)]="selectedColor">
        <ion-select-option *ngFor="let eachColor of colors;"
                [value]="eachColor">
             {{eachColor.label}}
        </ion-select-option>
  </ion-select>
  ...
  <ion-button (click)="deleteColor(selectedColor)">
        Delete Color
  </ion-button>

*.ts

  colors = [{ id: 1, label: 'Red' },  
            { id: 2, label: 'Green' },  
            { id: 3, label: 'Blue' }];
  selectedColor = this.colors[0];
  
  ...
  deleteColor(color) {
     this.colors = this.colors.filter(eachColor => eachColor.id !== color.id);
     this.selectedColor = this.colors[0];
  }

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.0
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.12.3
   @angular-devkit/schematics    : 7.2.3
   @angular/cli                  : 7.2.3
   @ionic/angular-toolkit        : 1.3.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-webview 2.3.2, (and 11 other plugins)

System:

   Android SDK Tools : 26.1.1
   ios-deploy        : 2.0.0
   NodeJS            : v8.11.3
   npm               : 5.6.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

[davl3232]

It's not just action-sheet, I tested the 3 possible values for interface and the same happens.

[yomatters]

I'm experiencing the same issue in an a JavaScript (non-Angular) app. The problem seems to be related to the ionSelectOptionDidUnload event not firing correctly, as the demonstrated by this component:

import { Component, Listen, State } from '@stencil/core';

@Component({
  tag: 'how-many'
})
export class HowMany {
  @State() howMany : number = 3;

  @Listen('ionSelectOptionDidLoad')
  handleOptionLoad() {
    console.log('option loaded');
  }

  @Listen('ionSelectOptionDidUnload')
  handleOptionUnload() {
    console.log('option unloaded');
  }

  render() {
    let options = [];
    for (let i = 0; i < this.howMany; i++)
      options.push(<ion-select-option value={i}>{i}</ion-select-option>);

    return (
      <ion-list>
        <ion-item>
          <ion-label>How many?</ion-label>
          <ion-select>
            {options}
          </ion-select>
        </ion-item>
        <ion-item>
          <ion-button onClick={() => this.howMany++}>Add Option</ion-button>
          <ion-button
              onClick={() => this.howMany = Math.max(this.howMany - 1, 0)}>
            Remove Option
          </ion-button>
        </ion-item>
      </ion-list>
    );
  }
}

[nickmeulen]

I have this issue on v4.0.1 where the options array within the alert component does not reload, despite the DOM updating with the correct ion-select-option list.

My work around was to add an *ngIf to the ion-select tag and hide the element with an empty array before wrapping the changes in a setTimout().

Markup:

ion-select
    *ngIf="someArray.length"
    [(ngModel)]="selectedOption"
    okText="Select" 
    cancelText="Cancel">
    <ion-select-option *ngFor="let item of someArray" [value]="item">
      {{item}}
    </ion-select-option>
</ion-select>

Component Example:

ngOnChanges(changes: SimpleChanges) {
    if (changes.someOption) {
      this.someArray = [];
      setTimeout(() => {
        this.updateData();
      }, 1);
    }
}

[brandyscarney]

Thanks for the issue! @liamdebeasi is this fixed by #17860?

[liamdebeasi]

Looks like it, yes 👍. I pushed a dev build earlier today with this fix if anyone wants to try it out and provide feedback. npm i @ionic/core@dev @ionic/angular@dev

Thanks!

[frenmanoj]

Hello @liamdebeasi , @brandyscarney ,

Just tried it against the following version. It hasn't been fixed yet 🙁
@ionic/core: 4.2.0-dev.201903262032.a8a48a4

[liamdebeasi]

Hi there,

Did you install @ionic/angular@dev as well?