How to handle IonRadioGroup change event in React using Formik?

Question

Okay, so I'm building an Ionic React app with Formik. I ran into this issue where an IonRadioGroup is not able to handle the state value set by Formik. I ended up in one of these 2 scenarios:

Versions

  ...
  "@ionic/react": "^6.0.0",
  "react": "^18.2.0",
  "formik": "^2.2.9",
  ...

With value prop

Or I could set a default value using the value prop on the IonRadioGroup and have it default to a static or database value. But in this case I was not able to change the value using the onIonChange function.

// Unable to change the value in Formik state, but able to default the value because of 'value' prop
<IonItemGroup>
  <IonItemDivider>Type</IonItemDivider>
  <IonRadioGroup
    name="type"
    value={formik.values.type}
    onIonChange={(e) => formik.setFieldValue("type", e.detail.value)}
  >
    <IonItem>
      <IonLabel>Percentage</IonLabel>
      <IonRadio slot="end" value="percentage" />
    </IonItem>
    <IonItem>
      <IonLabel>Fixed</IonLabel>
      <IonRadio slot="end" value="fixed" />
    </IonItem>
  </IonRadioGroup>
</IonItemGroup>

Without value prop

Or I could omit the value prop and, thus have no default value, but be able to change the value in Formiks state.

// Able to change the value in Formik state, but no default because of missing 'value' prop
<IonItemGroup>
  <IonItemDivider>Type</IonItemDivider>
  <IonRadioGroup
    name="type"
    onIonChange={(e) => formik.setFieldValue("type", e.detail.value)}
  >
    <IonItem>
      <IonLabel>Percentage</IonLabel>
      <IonRadio slot="end" value="percentage" />
    </IonItem>
    <IonItem>
      <IonLabel>Fixed</IonLabel>
      <IonRadio slot="end" value="fixed" />
    </IonItem>
  </IonRadioGroup>
</IonItemGroup>

I think this issue might occur because when you use Formik and update the value prop of the IonRadioGroup inside the onIonChange event handler, Formik triggers a re-render of your component, and the IonRadioGroup is re-initialized with the new value, causing the onIonChange event to be fired twice.

Sidenote

formik.handleChange does not seem to work here. Because the change event is quite exotic I guess. Therefore resorting to formik.setFieldValue.

Question

Am I missing something here? I am open to suggestions.

Answer 1

The only solution I found so far was to use setTimeout to delay the call to setFieldValue. Probably because the event handler function finishes execution before the component is re-rendered.

<IonItemGroup>
  <IonItemDivider>Type</IonItemDivider>
  <IonRadioGroup
    name="type"
    value={formik.values.type}
    onIonChange={(e) =>
      setTimeout(
        () => formik.setFieldValue("type", e.detail.value),
        0
      )
    }
  >
    <IonItem>
      <IonLabel>Percentage</IonLabel>
      <IonRadio slot="end" value="percentage" />
    </IonItem>
    <IonItem>
      <IonLabel>Fixed</IonLabel>
      <IonRadio slot="end" value="fixed" />
    </IonItem>
  </IonRadioGroup>
</IonItemGroup>