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>
  );
}

A link to the problem is not useful. If the error is fixed in that example, your question has no value here, because the problem won't exist for future users. All relevant code must be here, in the question itself, as required in the [help/on-topic] guidelines. — Ken White, Feb 19 '23 at 00:08
@KenWhite I have updated the question to include the main section of code which is not working. — Stephen E., Feb 19 '23 at 09:11

score 0 · Accepted Answer · answered Feb 19 '23 at 10:01

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

Ionic React cannot select radio button after form error

1 Answers1