diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx index abd289c2635..8abd04477de 100644 --- a/core/src/components/checkbox/checkbox.tsx +++ b/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'; @@ -265,6 +265,10 @@ export class Checkbox implements ComponentInterface { ev.stopPropagation(); }; + private onSlotChange = () => { + forceUpdate(this); + }; + private getHintTextId(): string | undefined { const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this; @@ -382,7 +386,7 @@ export class Checkbox implements ComponentInterface { id={this.inputLabelId} onClick={this.onDivLabelClick} > - + {this.renderHintText()}
diff --git a/packages/angular/test/base/e2e/src/standalone/value-accessors.spec.ts b/packages/angular/test/base/e2e/src/standalone/value-accessors.spec.ts index 44a85cadf14..dc4c7b92d4d 100644 --- a/packages/angular/test/base/e2e/src/standalone/value-accessors.spec.ts +++ b/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(); }); }); diff --git a/packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.html b/packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.html index c121dab37a7..0f264add5b8 100644 --- a/packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.html +++ b/packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.html @@ -6,6 +6,7 @@

IonCheckbox Value Accessors

- Checkbox + Static Checkbox Label + {{dynamicLabel}}
diff --git a/packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.ts b/packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.ts index d58672d9549..edf8d16e375 100644 --- a/packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.ts +++ b/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 = ''; + + ngAfterViewInit(): void { + this.dynamicLabel = 'Dynamic Checkbox Label'; + } form = this.fb.group({ checkbox: [false, Validators.required],