[4.0.0-beta.17] Conditional ion-select-option not updating

[RHinderiks]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)             : 4.3.1 (/Users/rh/.nvm/versions/node/v8.11.4/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.16
   @angular-devkit/build-angular : 0.10.5
   @angular-devkit/schematics    : 7.0.5
   @angular/cli                  : 7.0.5
   @ionic/angular-toolkit        : not installed

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.1.2, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.1.0, (and 13 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/rh/Library/Android/sdk)
   ios-deploy        : 1.9.2
   ios-sim           : 6.0.0
   NodeJS            : v8.11.4 (/Users/rh/.nvm/versions/node/v8.11.4/bin/node)
   npm               : 6.4.1
   OS                : macOS High Sierra
   Xcode             : Xcode 10.1 Build version 10B61

Describe the Bug
I have a select box in which the items contain a integer value. When this integer value is decreased below zero we try to hide the item with an *ngIf. However the item remains and the label of the ion-select does not update. This only happens when the limit of 0 is reached and the ngif is triggered.

if is add a button that ngif's the entire ion-select and toggle it on and off then it does update.

Steps to Reproduce
Steps to reproduce the behavior:

1. Add several options to a ion-select
2. Add *ngIf to the options
3. Dynamicly change the value that your ngiffing to trigger de ngif with a button or something
4. open the selectbox
5. be amazed the value is still there

Related Code
<ng-container *ngFor="let productCredit of productCredits"> <ion-select-option *ngIf="productCredit.bookableCredit > 0" [value]="productCredit">{{ productCredit.label }}</ion-select-option> </ng-container> <ion-button (tap)="changedBookableCreditToLessThanZero()">Push me<ion-button>

Expected Behavior
The values in a ion-select should update visually, in my case the should dissappear because i ng-iffed them.

Additional Context
List any other information that is relevant to your issue. Stack traces, related issues, suggestions on how to fix, Stack Overflow links, forum links, screenshots, OS if applicable, etc.

[d0x]

Could be related to #15716.

[RHinderiks]

Could be but it does not look like that ticket has been picked up.

[RHinderiks]

This is still an major issue in beta.17!

[bryce13950]

Could be related to #15716.

I think you are correct. Thanks for connecting them. I think once this is fixed both should be addressed.

[ghost]

is there any chance we can handle the dynamic selection of options via value on ion-select. anyone tried that?

i am facing an issue in rendering the selected options. they become visible when i click the select component. i think there is some issue with change detection.

[liamdebeasi]

Hi there,

Thanks for the issue! We have pushed a nightly build containing some fixes for loading/re-loading select options. Would you be able to try it out in your app and let me know if the issue you are running into here is fixed? (npm i @ionic/core@dev @ionic/angular@dev)

Thanks for your patience as we work to resolve this issue!

[Maarcel]

Hi @liamdebeasi, unfortunately it still does not work..

[liamdebeasi]

Hi @Maarcel,

Thanks for checking! Do you have a code snippet I can use to reproduce this issue?

Thanks!

[Maarcel]

<ion-item>
    <ion-label>Numbers</ion-label>
    <ion-select placeholder="Choose">
        <ion-select-option *ngFor="let number of numbers">{{ number }}</ion-select-option>
    </ion-select>
</ion-item>

For example i have an array with numbers. When i change the numbers array this has no effect to the ion-select-options

[ShaneJohnsonCC]

Hey @liamdebeasi !

Is there an update on this? I'm the same exact scenario as @Maarcel, however my select options will update only if the array of numbers is greater than the previous.

So if it started at 25 and I updated it to 30, it would work. But if I then change it to 29 or lower, no update occurs...

[liamdebeasi]

Hi everyone,

There are some changes to Stencil actively being worked on that we think may resolve this issue. I am going to do some testing with it later this week and will post here when I have an update.

Also linking #17344 since it seems to be related.

Thanks!

[liamdebeasi]

Hi everyone,

The updates to Stencil need a little bit more time. I will update everyone when I more to share.

We appreciate your patience as we work to resolve this issue. Thanks!

[ShaneJohnsonCC]

Hey @liamdebeasi !

Do you have an estimate timeline on this? Or maybe a temporary fix we can do on our end?

Thanks!

[notyetspecified]

Hi,
Anyone with an elegant workaround for this?
Thank you :)

[ShaneJohnsonCC]

Ditto what @Ladeiras asked. Just to be persistent :) A part of my app really depends on this working properly

[kamalessence]

+1

[BDominik]

Any solution on this?
I already spent more then 3 hours searching for fixes, and nothing...

[david0178418]

As a workaround, I'm just rendering two distinct select boxes that I'm toggling between:

<ion-select *ngIf="myCondition">
	<ion-select-option>A</ion-select-option>
	<ion-select-option>B</ion-select-option>
	<ion-select-option>C</ion-select-option>
</ion-select>
<ion-select *ngIf="!myCondition">
	<ion-select-option>A</ion-select-option>
	<ion-select-option>C</ion-select-option>
</ion-select>

It's brute force, but it works.

[BDominik]

Thank you for your answer I did exactly the same thing. :D
Not nice but at least working.

[eRendon]

other solution on this?
the solution at @david0178418 is not posible to my. need any solution because selects options are dynamics every time

[liamdebeasi]

A fix for this is available in Ionic 4.9.0. For any new bugs, please create a new issue.

Thanks!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.