[4.0.0-beta.7] [Ion-Select-Option] Displays old values when empty array

[wozniak-michal]

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.1.2
   Ionic Framework            : @ionic/angular 4.0.0-beta.7
   @angular-devkit/core       : 0.7.0-rc.3
   @angular-devkit/schematics : 0.7.0-rc.3
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.0
   @ionic/schematics-angular  : 1.0.1

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.0.2, (and 4 other plugins)

System:

   Android SDK Tools : 26.1.1 (D:\dev\androidSDK)
   NodeJS            : v8.11.3 (D:\dev\nodejs\node.exe)
   npm               : 6.4.1
   OS                : Windows 7

Describe the Bug
When empty array is supplied to *ngFor in ion-select-option element then it displays old values

Steps to Reproduce

1. Select course two
2. Open instructors select (it is empty)
3. Select course one
4. Open instructors select (it contains two elements as expected)
5. Select course two
6. Open instructors select - here is the bug - it is not empty, contains values from step 4

Related Code
Simplified but it shows the bug

    <ion-item>
      <ion-label>Courses</ion-label>
      <ion-select (ionChange)="courseChanged($event)" interface="action-sheet">
        <ion-select-option *ngFor="let course of courses$ | async" [value]="course.id">
          {{course.name}}
        </ion-select-option>
      </ion-select>
    </ion-item>
    <ion-item>
      <ion-label>Instructors</ion-label>
      <ion-select interface="action-sheet">
        <ion-select-option *ngFor="let instructor of instructors$ | async" [value]="instructor.id">
          {{instructor.name}}
        </ion-select-option>
      </ion-select>
    </ion-item>
    <p>Here are displayed array values</p>
    <ion-item *ngFor="let instructor of instructors$ | async">
      {{instructor.name}}
    </ion-item>

	courseId$ = new BehaviorSubject<number>(0);
	courses$: Observable<any[]>;

	instructors$: Observable<any[]>;

	ngOnInit() {
		this.courses$ = this.getAllCourses();

		this.instructors$ = this.courseId$.pipe(
			switchMap(id => this.getInstructorsNamesByCourseId(id)),
			tap(console.log)
		);
	}

	setCourseId(id: number) {
		this.courseId$.next(id);
	}

	courseChanged(e: CustomEvent) {
		this.setCourseId(e.detail.value);
	}

	// api call
	getAllCourses(): Observable<any[]> {
		return of([
			{id: 1, name: 'Course one (2 instructors)'},
			{id: 2, name: 'Course two (empty)'},
		]);
	}

	// api call
	getInstructorsNamesByCourseId(id: number): Observable<any[]> {
		if (id === 1) {
			return of([
				{id: 1, name: 'Instructor One'},
				{id: 2, name: 'Instructor Two'},
			]);
		} else {
			return of([]);
		}
	}

Expected Behavior
Instructors select should always be empty when course selected item is (course two empty).
Correct values are always displayed below selects.

[RomeoDenis]

This issue still persists in 4.0.0-beta.11

[paulstelzer]

I this still an issue in beta.17?

[wozniak-michal]

I this still an issue in beta.17?

Yes, issue still exists. As a workaround I am disabling ion-selects controls.

Current ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.5.0 (C:\Users\Developer\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.17
   @angular-devkit/build-angular : 0.10.7
   @angular-devkit/schematics    : 0.7.5
   @angular/cli                  : 7.0.7
   @ionic/angular-toolkit        : 1.2.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.0.2, (and 5 other plugins)

System:

   Android SDK Tools : 26.1.1 (D:\dev\androidSDK)
   NodeJS            : v10.12.0 (D:\dev\nodejs\node.exe)
   npm               : 6.4.1
   OS                : Windows 7

[json-alzate]

Still is a bug; but I find a little solution, maybe no is very clear...but you can destroy the select and rebuild again:

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

...

showSelect: boolean;

constructor(
  public cdr: ChangeDetectorRef
) { }

...

this.showSelect = false;
this.cdr.markForCheck();
setTimeout(() => {
  this.showSelect = true;
  this.cdr.markForCheck();
}, 100);

// HTML
<ion-select *ngIf="showSelect">
  <ion-select-option *ngFor="let item of items">
    {{ item }}
  </ion-select-option>
</ion-select>