Ionic React cannot select radio button after form error

Question

I have a form which is dynamically built using Ionic React and Yup for validation, this is done based on information coming from an API but I have an issue if I do not select a radio button when I press submit the radio buttons become unclickable which means I can never get the error away.

I have created an example here with a hardcoded form rather than it being populated dynamically and if you click Save without doing anything you will then not be able to select the radio buttons but I can't workout where my issue is coming from.

Link to example of my issue

Edit:

Here is the main section of code not working:

import React, { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import {
  IonList,
  IonRadioGroup,
  IonItem,
  IonLabel,
  IonRadio,
  IonButton,
  IonContent,
  IonPage,
  setupIonicReact,
  IonInput
} from "@ionic/react";

/* Core CSS required for Ionic components to work properly */
import "@ionic/react/css/core.css";

/* Basic CSS for apps built with Ionic */
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";

/* Optional CSS utils that can be commented out */
import "@ionic/react/css/padding.css";
import "@ionic/react/css/float-elements.css";
import "@ionic/react/css/text-alignment.css";
import "@ionic/react/css/text-transformation.css";
import "@ionic/react/css/flex-utils.css";
import "@ionic/react/css/display.css";

/* Theme variables */
import "./theme/variables.css";
setupIonicReact();

const validationSchema = yup.object().shape({
  q7: yup.string().required("selection is required")
});

export default function App() {
  const {
    register,
    reset,
    getValues,
    handleSubmit,
    control,
    formState: { errors }
  } = useForm({
    resolver: yupResolver(validationSchema),
    mode: "all"
  });

  const onSubmit = (data: any) => {
    console.log(data);
  };

  // useEffect(() => {
  //   reset({
  //     // q7: "6"
  //   });
  // }, [reset]);

  return (
    <React.Fragment>
      <IonPage className="xion-page" id="main-cntent">
        <IonContent className="ion-padding">
          <div className="App">
            <form onSubmit={handleSubmit(onSubmit)}>
              <>
                values:{getValues("name")}
                <IonInput {...register("name")}></IonInput>
                error:{errors["q7"]?.message}
                values:{getValues("q7")}
                <Controller
                  control={control}
                  name="q7"
                  render={({ field: { onChange, value, ref } }) => (
                    <>
                      {console.log(value)}
                      <IonList>
                        <IonRadioGroup
                          ref={ref}
                          defaultValue=""
                          // allowEmptySelection={true}
                          value={value ?? ""}
                          onIonChange={({ detail: { value } }) =>
                            onChange(value ?? "")
                          }
                        >
                          <IonItem>
                            <IonLabel>Type 2</IonLabel>
                            <IonRadio value="2" slot="start" />
                          </IonItem>

                          <IonItem>
                            <IonLabel>Type 4</IonLabel>
                            <IonRadio slot="start" value="4" />
                          </IonItem>

                          <IonItem>
                            <IonLabel>Type 6</IonLabel>
                            <IonRadio slot="start" value="6" />
                          </IonItem>
                        </IonRadioGroup>
                      </IonList>
                    </>
                  )}
                />
                <br />
                <IonButton type="submit">Save</IonButton>
              </>
            </form>
          </div>
        </IonContent>
      </IonPage>
    </React.Fragment>
  );
}

Answer 1

Your problem is that you should pass in onChange function js event. In onIonChange modified event with custom properties. But you actually passed a value to the function, not an event.

You can find in docks where is standard js event in onIonChange or just setValue

 <IonRadioGroup
    {...field}
    onIonChange={
    (event) => {
       setValue('q7', event.detail.value)
      }
    }
 >

https://codesandbox.io/s/crimson-breeze-d9fptl?file=/src/App.tsx:2253-2591