Ion-select values not refreshed

Hello,

I want to update the values of a ion-select when the user enters a value in a ion-searchbar and press enter. The ion-select values are correctly updated and I can see them on a console.log, but if I use the open() method of the ion-select (this.select.open() in my code below), the select window is empty (no values are displayed).
Do you have any idea?
Thank you.

The HTML file:

<ion-content padding>
	<ion-searchbar [(ngModel)]="searchText" (change)="searchPlace()" [showCancelButton]="true" (ionCancel)="onCancel($event)" (ionClear)="onClear($event)"></ion-searchbar>
	<ion-label ng-if="selectedPlace.length > 0">{{ selectedPlace }}</ion-label>
	
	<ion-item>
		<ion-label>Place</ion-label>
		<ion-select #select [(ngModel)]="selectedPlace" (ionChange)="selectPlace()">
			<ion-option *ngFor="let place of places" value="{{ place }}">{{ place }}</ion-option>
		</ion-select>
	</ion-item>
</ion-content>

The TS file:

import { Component, ViewChild } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import { Select } from ‘ionic-angular’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’,
queries: {
select: new ViewChild(‘select’)
}
})
export class HomePage {
@ViewChild(‘select’) select: Select;
items;
places: string = ;
selectedPlace: string = “”;
searchText: string = “”;

constructor(public navCtrl: NavController) {
    this.initializeItems();
}

initializeItems() {
    this.items = [
        'Amsterdam',
        'Bogota',
        'Buenos Aires',
        'Cairo',
        'Dhaka',
        'Edinburgh',
        'Geneva',
        'Genoa',
        'Glasglow',
        'Hanoi',
        'Hong Kong',
        'Islamabad',
        'Istanbul',
        'Jakarta',
        'Kiel',
        'Kyoto',
        'Le Havre',
        'Lebanon',
        'Lhasa',
        'Lima',
        'London',
        'Los Angeles',
        'Madrid',
        'Manila',
        'New York',
        'Olympia',
        'Oslo',
        'Panama City',
        'Peking',
        'Philadelphia',
        'San Francisco',
        'Seoul',
        'Taipeh',
        'Tel Aviv',
        'Tokio',
        'Uelzen',
        'Washington'
    ];
}
onCancel(event) {
    this.resetSearchPlaces();
    console.log("onCancel");
}
onClear(event) {
    this.resetSearchPlaces();
    console.log("onClear");
}
resetSearchPlaces() {
    this.places = [];
}
searchPlace() {
    console.log(this.searchText);
    // set val to the value of the ev target
    let val = this.searchText;
    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
        this.places = this.items.filter((item) => {
            return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
        })
        if (this.places.length > 0) {
            console.log(this.places);
            this.select.open();
        }
    }
}

selectPlace() {
    console.log("selectPlace");
    this.searchText = "";
}

}

Screenshot:

Could you recreate this in some sort of plunkr example?

This will help debug the issue a bit further

Sure, here is the link:


I updated app/home.page.ts and app/home.page.html

Thank you.

This looks thorny. If you don’t get any better answers, try injecting a ChangeDetectorRef in your constructor and call its detectChanges() method right before you open the select.

2 Likes

Thanks for the help, ChangeDetectorRef works :slight_smile:

What I did:
//Add the import
import { ChangeDetectorRef } from ‘@angular/core’;

//Add ChangeDetectorRef in constructor
constructor(public navCtrl: NavController, public cdr: ChangeDetectorRef) {

//Call detectChanges just before open()
this.cdr.detectChanges();
this.select.open();

Thank you so much for posting your solution… I ran into the same issue and having it so well detailed really helped me.