ionic-framework icon indicating copy to clipboard operation
ionic-framework copied to clipboard

bug: ion-checkbox sometimes does not show label from variable

Open SandraCaci opened this issue 4 months ago • 4 comments

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

Reproduced test case in StackBlitz

In https://stackblitz.com/~/github.com/SandraCaci/test-case-ion-checkbox you see an ion-checkbox based on an Angular form control, with default value false and label from a variable, which does not show the label when opening the page. It only shows the label when you check the box and then it remains. When you refresh the page or navigate to another page and come back, the label disappears again.

When does the bug not occur?

This does not happen if the form control is disabled, if the default value is true, or if the label is hardcoded in the html (see the other check boxes in the test case). The bug occurs with Ionic 8.6.6, 8.7.1 and 8.7.2, but not with Ionic 8.6.7 or 8.7.0. It seems related to the upgrade to @stencil/core 4.36.2 which was done in 8.6.6 (reverted in 8.6.7) and again done in 8.7.1, see https://github.com/ionic-team/ionic-framework/releases , because if I force the use of @stencil/core 4.33.1 with Ionic 8.7.2 the bug is not there.

Expected Behavior

The label should show immediately when opening the page. Now the users cannot see what is the purpose of the checkbox.

Steps to Reproduce

  1. Go to https://stackblitz.com/~/github.com/SandraCaci/test-case-ion-checkbox
  2. Wait until the app is started and you see "Demo of demo-test-input-checkbox"
  3. Notice that the 2nd checkbox does not show a label (the one with red text below it)
  4. Click on that checkbox and notice that the label appears.
  5. Click the home icon in the upper left icon to go to the home page, and then the checkbox icon just below it to go back to the checkbox page, and note that the label of the 2nd checkbox has disappeared again.

Code Reproduction URL

https://github.com/SandraCaci/test-case-ion-checkbox

Ionic Info

Ionic:

Ionic CLI : 5.4.16

Utility:

cordova-res : not installed native-run : not installed

System:

NodeJS : v22.18.0 npm : 10.9.3 OS : Windows 10

Additional Information

No response

SandraCaci avatar Aug 14 '25 13:08 SandraCaci