bug: radio-group-wrapper breaks removing options with react

[postmann]

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

v8.x

Current Behavior

The radio-group-wrapper which was introduced in core/src/components/radio-group/radio-group.tsx for solving #30222 causes React to crash when options are added/removed dynamically like in the typeahead selection example from the docs.

Expected Behavior

Ionic should not cause React to crash when radio options are added/removed dynamically.

Steps to Reproduce

1. Create a React-based ionic app
2. Add a modal with radio group and typeahead functionality (similar to the one from the docs, but should also work without a modal around the radio group
3. Run the app, type something into the searchbar for filtering the radio items

Code Reproduction URL

https://stackblitz.com/edit/4cdat5jx

Ionic Info

Ionic:

   Ionic CLI       : 7.2.1 (/home/reuter/.nvm/versions/node/v20.18.0/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 8.5.4

Capacitor:

   Capacitor CLI      : 7.2.0
   @capacitor/android : 7.2.0
   @capacitor/core    : 7.2.0
   @capacitor/ios     : 7.2.0

Utility:

   cordova-res : not installed globally
   native-run  : 2.0.1

System:

   NodeJS : v20.18.0 (/home/reuter/.nvm/versions/node/v20.18.0/bin/node)
   npm    : 10.8.2
   OS     : Linux 5.15

Additional Information

Workaround: revert Ionic version to 8.4

[tdeckard2000]

I am experiencing the same problem.

I was also seeing an issue with the @ion-modal (ex. @ion-modal-did-present) lifecycle hooks not firing. Installing "@ionic/vue@8.4.0" resolved both issues.

[brickedsolutions]

Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Can someone fix this bug already in IonRadioGroup?
I am stuck at v 8.4.6 due to this.

IonRadioGroup stopped working if we don't have IonRadio's as its direct child, eg-

IonRadioGroup
IonItem
IonRadio /
/ IonItem
/ IonRadioGroup

this structure stopped working after v8.5.0, #30222,
but earlier it used to work fine and is neccessary.

[postmann]

Our workaround for now is wrapping the IonRadio tags in a div like this:

<IonRadioGroup
  onIonChange={handleChange}
>
  {/* adding a div here to circumvent
  https://github.com/ionic-team/ionic-framework/issues/30359 */}
  <div>
    <IonRadio .../>
    <IonRadio .../>
    <IonRadio .../>
...
  </div>
</IonRadioGroup>

[brandyscarney]

Thank you for the issue and sorry this hasn't been fixed yet.

The reason the wrapper is needed in the Ionic Framework is due to a Stencil bug that causes the blur event to fire immediately when focusing the radios without the wrapper. We did some work to fix this in Stencil, but when I tested it last week it only fixed the issue in JavaScript and not for the other frameworks. We'll need to investigate further to understand why the blur event is still firing on focus before we can remove the wrapper in the radio group.

I'm glad you found a workaround. Thank you for sharing it with others!

[aparajita]

The wrapper also suddenly made custom styling of the ion-radio-group stop working, and because it's declared display: inline, it no longer fills the width of the parent group.

I had to override the radio-group-wrapper class. Would be nice if at least this was documented.