bug: radio button disabled prop doesn't handle undefined

[nmspackman]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

An IonRadio component with undefined passed as a value to the disabled prop causes the radio to not trigger the onIonChange function when selected. The visual effect is the previous selection and the current selection (with disabled set to undefined) will both be selected.'

Note: Cherries is the radio that has disabled set to undefined.

Expected Behavior

The radio button should be selected and the radio group value should update.

Steps to Reproduce

1. Create an IonRadioGroup with 3 IonRadio components nested (values are arbitrary)
2. Set one of the IonRadio's disabled prop to undefined
3. When viewing the UI, click one of the radios without the disabled prop set, then click the radio with it set

Code Reproduction URL

https://stackblitz.com/edit/f4avhg?file=src%2Fmain.tsx

Ionic Info

N/A

Additional Information

To work around this issue, I set the disabled prop using strict equals for comparing the variable passed in. It looks something like this:

<IonRadio value="cherries" disabled={options?.isDisabled === true}>
    Cherries
</IonRadio>

[liamdebeasi]

Thanks for the report. Can you help me understand why you need to pass undefined instead of false to disabled? As per the docs, the disabled property accepts a boolean: https://ionicframework.com/docs/api/radio#properties This behavior is consistent with the other disabled properties in Ionic.

[nmspackman]

Thanks for the quick response!

I wouldn't say need, but that's how we previously were using the component without issue. Typically the value would be true or false, but it was possible for that value to not be set (undefined). We upgraded, then caught this behavior weeks later. So, it appeared to be a bug.

The only confusing thing as a TS developer is that (despite the type being boolean) being optional allows for undefined to be passed in. Passing in any other falsy value of course will be caught, but undefined is the only exception. My personal expectation is that any prop set to undefined would function as if the prop was never passed at all.

At the end of the day, it's not a big deal. We now know, but others may benefit from it.

[liamdebeasi]

The only confusing thing as a TS developer is that (despite the type being boolean) being optional

Out of curiosity, where are you seeing that this property is marked as optional? The intent of the disabled property is that it is required, but maybe there's a type mixup somewhere.

[nmspackman]

@ionic/core/dist/types/components.d.ts:

Which shows in the VSCode tooltip as:

[p1ercedev]

You could create a wrapper (either for each IonRadio or an IonGroup like, like I've done below) and force the type boolean like this:
interface IonProps { value: string; disabled: boolean; } const CustomIonRadioGroup: React.FC<IonProps> = (props: IonProps) => { return ( <> <p>Current Value: {value}</p> <IonRadioGroup value={value} onIonChange={(e) => { console.log(value); setValue(e.detail.value); }} > <IonRadio value="cherries" disabled={props.disabled}> Cherries </IonRadio> <br /> <IonRadio value="grapes">Grapes</IonRadio> <br /> <IonRadio value="strawberries">Strawberries</IonRadio> <br /> <IonRadio value="pineapple">Pineapple</IonRadio> <br /> </IonRadioGroup> </> ); }; return <CustomIonRadioGroup value={value} disabled={false} />;

[1pandeyji]

I can solve this issue.