question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ion-select delayed population fails to show selected item

See original GitHub issue

Bug Report

Ionic version:

[x] 4.x

Current behavior: Setting the [(ngModel)] on an <ion-select> component fails when there is a ~55 ms or more delay between OnInit and the population of the various <ion-select-options> elements. This typically occurs when populating the values via an API call but it can be demonstrated with a simple delay. The correct option is selected but not shown. If you click on the drop down caret, the value instantly displays.

Expected behavior: The component should show the correct value.

Steps to reproduce: Introduce a 100ms delay between OnInit and populating the control.

Related code:

https://github.com/andleer/ionic4-select-bug/

// with delay, component fails to show selection
setTimeout(() => {
   this.widgets = this.pseudoApiSource;
}, 200);

Other information:

Ionic info:

 cli packages: (C:\Users\andrew\AppData\Roaming\npm\node_modules)

   @ionic/cli-utils  : 2.0.0-rc.3
   ionic (Ionic CLI) : 4.0.0-rc.3

System:

   NodeJS : v10.15.0
   npm    : 6.4.1
   OS     : Windows 10

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:8
  • Comments:10 (4 by maintainers)

github_iconTop GitHub Comments

3reactions
andleercommented, Jan 25, 2019

Adding a 100ms delay after the “api” completes and then setting the selected value causes the selected text to be correctly displayed. Set the value earlier than about 50ms and the update seems to be lost. I have updated the example repo with this delay so it now correctly operates.

I also played with zone.run(() => ... ) and that didn’t seem to solve the issue.

setTimeout(() => {
  this.widgets3 = this.pseudoApiSource;
  console.log('widget 3 loaded');
  setTimeout(() => {
    // setting the value here after a delay of about 50ms or more
    // after the "api" call completes
    // causes the selected text to appear correctly.
    // remove the delay and just set the value at the end here
    // and the selected text will fail to display.
    this.selectedWidgetId = 4;
  }, 100);

I now think this is not about the delay driven by an API but rather the lack of a small delay beyond data binding in setting the value. Set it too soon and the selected text will not be updated.

1reaction
awadddqcommented, Feb 28, 2019

can i reback to ionic v3 ?

Read more comments on GitHub >

github_iconTop Results From Across the Web

[Ionic 5] [Angular] ion-select does not show the selected values
I think the problem is somehow related to the <*ngFor=“let item of linesList”>, because “selectLine” is returning the right values. Any other ...
Read more >
Ionic 5/Angular - ion-select does not show the selected values
I am getting the value of selected option and its working fine with me. Share.
Read more >
Ionic 4 Ionselect Selected Value Text Truncates Way Too Soon
Issue: ion-select delayed population fails to show selected item package: core type: bug. Clarus 600/560 DGas Chromatograph/Mass ...
Read more >
Plastic pollution | Definition, Sources, Effects, Solutions, & Facts
In any case, recycling does not really address plastic pollution, ... disposal or even on limiting the use of certain plastic items in...
Read more >
ion select selected value ionic 4 5 Code Example
<ion-select-option value="f">Female</ion-select-option> ... WARNING: There was an error checking the latest version of pip.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found