Ionic-framework: [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 ([email protected])
   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 https://github.com/ionic-team/ionic/pull/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?

[frenmanoj]

Hello @liamdebeasi,

Yes, I installed that too. Basically I ran the command:

npm i @ionic/core@dev @ionic/angular@dev

[liamdebeasi]

Hi everyone,

After doing some digging, I have a couple observations:

1. ionSelectOptionDidUnload _is_ being emitted from the ion-select-option component in its componentDidUnload lifecycle hook.
2. ion-select is not picking up the event because the ion-select-option component no longer exists.

It looks like this is an issue with Stencil: https://github.com/ionic-team/stencil/issues/1218

I'm going to reach out to some team members working on Stencil, but in the meantime I will try to find a suitable workaround.

Thanks for your patience!

[liamdebeasi]

Hi everyone,

There are some changes to Stencil actively being worked on that we think may resolve this issue. I am going to do some testing with it later this week and will post here when I have an update.

Thanks!

[BDominik]

Is there any progress?
This ting still not working.
I'm filtering the list based on some condition, and it's not reflecting in the select list.
`Ionic:

ionic (Ionic CLI) : 4.10.1 (C:Users\bdomi\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.3.1
@angular-devkit/build-angular : 0.13.8
@angular-devkit/schematics : 7.3.8
@angular/cli : 7.3.8
@ionic/angular-toolkit : 1.5.1

Cordova:

cordova (Cordova CLI) : not installed
Cordova Platforms : not available
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 6 other plugins)

System:

Android SDK Tools : 26.1.1 (C:Users\bdomi\AppData\Local\Android\sdk)
NodeJS : v10.15.1 (C:\Program Files\nodejs\node.exe)
npm : 6.4.1
OS : Windows 10
`

[varogonz95]

Have you tried splicing the array instead of just re-assigning its value?

This is a recommended practice in AngularJS. Idk if this applies with Angular 2+ as well

[digat]

i have the same issue i solve it like this
this.colors = [];
then
setTimeout(() => {
this.colors = this.colors.filter(eachColor => eachColor.id !== color.id);
}, 2);
but i think it is not a practical solution ! coz it not working always

[digat]

Any work Around better than y approach ?

[BDominik]

I'm hidding the pickers with ngIf and then showing itt quickly.
Ugly but working.

[dylanvdmerwe]

Note that this is still happening in 4.8.0.

[liamdebeasi]

A fix for this is available in Ionic 4.9.0. For any new bugs, please create a new issue.

Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.