ion-select delayed population fails to show selected item
See original GitHub issueBug 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:
- Created 5 years ago
- Reactions:8
- Comments:10 (4 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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.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.
can i reback to ionic v3 ?