From 22eed8910851b9cb47542e2dab5e4ebf5c879dd6 Mon Sep 17 00:00:00 2001 From: Jacob Bell <228905018+OS-jacobbell@users.noreply.github.com> Date: Fri, 27 Feb 2026 10:01:59 -0700 Subject: [PATCH 1/4] fix(checkbox): re-evaluate label visibility when label is updated --- core/src/components/checkbox/checkbox.tsx | 4 ++-- .../e2e/src/standalone/value-accessors.spec.ts | 14 ++++++++++---- .../checkbox/checkbox.component.html | 3 ++- .../value-accessors/checkbox/checkbox.component.ts | 5 +++++ 4 files changed, 19 insertions(+), 7 deletions(-) diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx index abd289c2635..2e2ff5e296a 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'; @@ -382,7 +382,7 @@ export class Checkbox implements ComponentInterface { id={this.inputLabelId} onClick={this.onDivLabelClick} > - + forceUpdate(this)}> {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..fba9444d018 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 = ''; + + ngAfterViewChecked(): void { + this.dynamicLabel = 'Dynamic Checkbox Label'; + } form = this.fb.group({ checkbox: [false, Validators.required], From e6842d2b458e592d7981009f38fab7fc26fdfc84 Mon Sep 17 00:00:00 2001 From: Jacob Bell <228905018+OS-jacobbell@users.noreply.github.com> Date: Mon, 2 Mar 2026 07:56:35 -0700 Subject: [PATCH 2/4] fix(checkbox): apply PR feedback --- core/src/components/checkbox/checkbox.tsx | 6 +++++- .../value-accessors/checkbox/checkbox.component.ts | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx index 2e2ff5e296a..dea97cff26f 100644 --- a/core/src/components/checkbox/checkbox.tsx +++ b/core/src/components/checkbox/checkbox.tsx @@ -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} > - forceUpdate(this)}> + {this.renderHintText()}
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 fba9444d018..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 @@ -17,7 +17,7 @@ import { ValueAccessorTestComponent } from "../value-accessor-test/value-accesso export class CheckboxComponent { dynamicLabel = ''; - ngAfterViewChecked(): void { + ngAfterViewInit(): void { this.dynamicLabel = 'Dynamic Checkbox Label'; } From edab038fa4092f96f0e0146c87c1b9457f0d83f4 Mon Sep 17 00:00:00 2001 From: Jacob Bell <228905018+OS-jacobbell@users.noreply.github.com> Date: Mon, 2 Mar 2026 08:01:13 -0700 Subject: [PATCH 3/4] fix(checkbox): add missing semicolon --- core/src/components/checkbox/checkbox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx index dea97cff26f..05e9525fe62 100644 --- a/core/src/components/checkbox/checkbox.tsx +++ b/core/src/components/checkbox/checkbox.tsx @@ -266,7 +266,7 @@ export class Checkbox implements ComponentInterface { }; private onSlotChange = () => { - forceUpdate(this) + forceUpdate(this); } private getHintTextId(): string | undefined { From 03bc9f52f62ac58248c2dbfa86beffcfdf424688 Mon Sep 17 00:00:00 2001 From: Jacob Bell <228905018+OS-jacobbell@users.noreply.github.com> Date: Mon, 2 Mar 2026 08:05:12 -0700 Subject: [PATCH 4/4] fix(checkbox): add another semicolon --- core/src/components/checkbox/checkbox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx index 05e9525fe62..8abd04477de 100644 --- a/core/src/components/checkbox/checkbox.tsx +++ b/core/src/components/checkbox/checkbox.tsx @@ -267,7 +267,7 @@ export class Checkbox implements ComponentInterface { private onSlotChange = () => { forceUpdate(this); - } + }; private getHintTextId(): string | undefined { const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;