When an underlying array is updated of an ion-select, the ion-select UI doesn’t change the item showing in the ion-select. Clicking on the ion-select brings the correct list with the removed item.
When using the same code with select/option instead of ion-select/ion-select-option the behavior is correct.
To reproduce the issue, use a blank template with angular, and place the following:
home.page.ts:
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-home’,
templateUrl: ‘home.page.html’,
styleUrls: [‘home.page.scss’],
})
export class HomePage {
items = [‘a1’, ‘a2’, ‘a3’];
itemId;
constructor() {}
delItem(){
this.items.splice(this.itemId, 1);
}
}
home.page.html:
<ion-header [translucent]=“true”>
<ion-toolbar>
<ion-title>
Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]=“true”>
<ion-select [(ngModel)]=“itemId” placeholder=“Select item” interface=“alert”>
<ion-select-option *ngFor=“let item of items; let i=index” [value]=“i”>{{i}} : {{item}}</ion-select-option>
</ion-select>
<select [(ngModel)]=“itemId” placeholder=“Select item” interface=“alert”>
<option *ngFor=“let item of items; let i=index” [value]=“i”>{{i}} : {{item}}</option>
</select>
<ion-button [disabled]=“itemId == null” (click)=“delItem()”>Delete {{itemId}}</ion-button>
</ion-content>