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

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:

Add several options to a ion-select
Add *ngIf to the options
Dynamicly change the value that your ngiffing to trigger de ngif with a button or something
open the selectbox
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.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 6
Comments: 22 (5 by maintainers)

Commits related to this issue

fix(all): component reusage (#18963) Use new stencil APIs to allow ionic elements to be reused once removed from the DOM. fixes #18843 fixes #17344 fixes #16453 fixes #15879 fixes #15788 fixe... — committed to ionic-team/ionic-framework by manucorporat 5 years ago
fix(all): component reusage (#18963) Use new stencil APIs to allow ionic elements to be reused once removed from the DOM. fixes #18843 fixes #17344 fixes #16453 fixes #15879 fixes #15788 fixe... — committed to ionic-team/ionic-framework by manucorporat 5 years ago
fix(all): component reusage (#18963) Use new stencil APIs to allow ionic elements to be reused once removed from the DOM. fixes #18843 fixes #17344 fixes #16453 fixes #15879 fixes #15788 fixe... — committed to ionic-team/ionic-framework by manucorporat 5 years ago

Most upvoted comments

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

Thanks!

liamdebeasi on Sep 4, 2019

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.

david0178418 on Jul 16, 2019

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

BDominik on Jul 17, 2019

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 https://github.com/ionic-team/ionic/issues/17344 since it seems to be related.

Thanks!

liamdebeasi on Apr 1, 2019

This is still an major issue in beta.17!

RHinderiks on Nov 30, 2018