fix(checkbox): re-evaluate label visibility when label is updated

Author: OS-jacobbell

core/src/components/checkbox/checkbox.tsx

@@ -1,5 +1,5 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Build, Component, Element, Event, Host, Method, Prop, State, h } from '@stencil/core';
+import { Build, Component, Element, Event, Host, Method, Prop, State, h, forceUpdate } from '@stencil/core';
 import { checkInvalidState } from '@utils/forms';
 import type { Attributes } from '@utils/helpers';
 import { inheritAriaAttributes, renderHiddenInput } from '@utils/helpers';
@@ -382,7 +382,7 @@ export class Checkbox implements ComponentInterface {
             id={this.inputLabelId}
             onClick={this.onDivLabelClick}
           >
-            <slot></slot>
+            <slot onSlotchange={() => forceUpdate(this)}></slot>
             {this.renderHintText()}
           </div>
           <div class="native-wrapper">

packages/angular/test/base/e2e/src/standalone/value-accessors.spec.ts

@@ -8,13 +8,19 @@ test.describe('Value Accessors', () => {
 
     test('should update the form value', async ({ page }) => {
       await expect(page.locator('#formValue')).toHaveText(JSON.stringify({ checkbox: false }, null, 2));
-      await expect(page.locator('ion-checkbox')).toHaveClass(/ion-pristine/);
+      await expect(page.getByRole('checkbox', { name: 'Static Checkbox Label' })).toHaveClass(/ion-pristine/);
 
-      await page.locator('ion-checkbox').click();
+      await page.getByRole('checkbox', { name: 'Static Checkbox Label' }).click();
 
       await expect(page.locator('#formValue')).toHaveText(JSON.stringify({ checkbox: true }, null, 2));
-      await expect(page.locator('ion-checkbox')).toHaveClass(/ion-dirty/);
-      await expect(page.locator('ion-checkbox')).toHaveClass(/ion-valid/);
+      await expect(page.getByRole('checkbox', { name: 'Static Checkbox Label' })).toHaveClass(/ion-dirty/);
+      await expect(page.getByRole('checkbox', { name: 'Static Checkbox Label' })).toHaveClass(/ion-valid/);
+
+      await expect(page.getByRole('checkbox', { name: 'Static Checkbox Label' })).toBeVisible();
+    });
+
+    test('should display dynamically set label', async ({ page }) => {
+      await expect(page.getByRole('checkbox', { name: 'Dynamic Checkbox Label' })).toBeVisible();
     });
   });
 

packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.html

@@ -6,6 +6,7 @@ <h1>IonCheckbox Value Accessors</h1>
   </p>
 
   <app-value-accessor-test [formGroup]="form">
-    <ion-checkbox formControlName="checkbox">Checkbox</ion-checkbox>
+    <ion-checkbox formControlName="checkbox">Static Checkbox Label</ion-checkbox>
   </app-value-accessor-test>
+  <ion-checkbox>{{dynamicLabel}}</ion-checkbox>
 </div>

packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.ts

@@ -15,6 +15,11 @@ import { ValueAccessorTestComponent } from "../value-accessor-test/value-accesso
   ]
 })
 export class CheckboxComponent {
+  dynamicLabel = '';
+
+  ngAfterViewChecked(): void {
+    this.dynamicLabel = 'Dynamic Checkbox Label';
+  }
 
   form = this.fb.group({
     checkbox: [false, Validators.required],