From 75ffeee933ae353d2601670178896116c81923e0 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 28 Dec 2023 12:14:01 -0500 Subject: [PATCH] fix(radio-group): radio disabled prop can be undefined (#28712) Issue number: resolves #28677 --------- ## What is the current behavior? Defining disabled a `@Prop() disabled = false` causes Stencil to mark this property as optional. This behavior is not desired on our end, but making the property required would be a breaking change. Additionally, the root issue is due to how Stencil resolves types. For example, `disabled` is [optional in the LocalJSX namespace](https://github.com/ionic-team/ionic-framework/blob/e96a1457a32646fa23c8218cb3cca4a8215ad115/core/src/components.d.ts#L6921) but [required in the Components namespace](https://github.com/ionic-team/ionic-framework/blob/e96a1457a32646fa23c8218cb3cca4a8215ad115/core/src/components.d.ts#L2239). Addressing this inside of Stencil is significant breaking change. As a result, the team has decided to compromise and support the falsy `disabled` state for radio for now. Other Ionic components that support the `disabled` prop also check for falsy values. Stencil plans to de-risk this in https://ionic-cloud.atlassian.net/browse/STENCIL-917. ## What is the new behavior? - Radio Group now looks at falsy values instead of strictly checking `false`. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information Dev build: `7.6.2-dev.11703182244.1165aeec` --- core/src/components/radio-group/radio-group.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/core/src/components/radio-group/radio-group.tsx b/core/src/components/radio-group/radio-group.tsx index 3e8a11c39b..dce1c62616 100644 --- a/core/src/components/radio-group/radio-group.tsx +++ b/core/src/components/radio-group/radio-group.tsx @@ -130,7 +130,15 @@ export class RadioGroup implements ComponentInterface { * using the `name` attribute. */ const selectedRadio = ev.target && (ev.target as HTMLElement).closest('ion-radio'); - if (selectedRadio && selectedRadio.disabled === false) { + /** + * Our current disabled prop definition causes Stencil to mark it + * as optional. While this is not desired, fixing this behavior + * in Stencil is a significant breaking change, so this effort is + * being de-risked in STENCIL-917. Until then, we compromise + * here by checking for falsy `disabled` values instead of strictly + * checking `disabled === false`. + */ + if (selectedRadio && !selectedRadio.disabled) { const currentValue = this.value; const newValue = selectedRadio.value; if (newValue !== currentValue) {