Mi problema es que tengo un formulario en react manejado con react hook form, pero por alguna razón los radio buttons no me funcionan correctamente cuando utilizo dos o más con el mismo nombre. Lo que pasa es que cuando se solicita que sea requerido y selecciono la primera opción me da error de validación al enviar el formulario, pero si vuelvo a seleccionar la misma opción después del error ya no muestra ningún error y se puede enviar la información.
Mi código es el siguiente:
Componente para grupo de RadioButtons
import { useFormContext } from 'react-hook-form'
import { classNames } from 'utils'
export default function RadioGroup({ id, title, options, validation }) {
const {
register,
formState: { errors }
} = useFormContext()
return (
<>
{title}
{options.map(({ label, value, readOnly }, i) => (
<label key={i} className="inline-flex items-center">
<input
{...register(id, validation)}
type="radio"
value={value}
readOnly={readOnly}
className={classNames(
readOnly
? 'bg-gray-100 cursor-not-allowed border-gray-300 focus:border-gray-300'
: errors[id]
? 'border-red-500 focus:border-red-500'
: 'h-5 w-5 text-blue-600'
)}
/>
<span className="ml-2 text-gray-700">{label}</span>
</label>
))}
<div className="mt-1">
{errors[id] && errors[id].type === 'required' && (
<span className="text-xs text-red-500">{`Seleccione una opción`}</span>
)}
</div>
</>
)
}
Y desde otro componente llamo al de RadioGroup de la siguiente manera:
const methods = useForm({ mode: 'onSubmit' })
const {
handleSubmit,
reset,
setValue,
formState: { errors }
} = methods
<FormProvider {...methods}>
<form
onSubmit={handleSubmit(onSubmit)}
className="w-full space-y-4 p-2"
>
<div className="grid grid-cols-1">
<RadioGroup
title="Es propio"
id="isOwn"
options={[
{ label: 'Sí', value: '1' },
{ label: 'No', value: '0' }
]}
validation={{
required: true
}}
/>
</div>
<div className="mt-8 w-full">
<div className="float-right px-4 space-x-2">
<button
className="btn btn-success"
type="submit"
>
Guardar
</button>
</div>
</div>
</form>
</FormProvider>
La parte que genera el problema es la validación de requerido. Si no lleva validación funciona (pero no valida y necesito que lo haga). Estuve viendo la implementación en la página oficial y ahí parece funcionar bien, pero a mí no. Incluso hice pruebas agregando los RadioButtons estáticos y siempre sucede el mismo problema. Agradecería mucho si me pueden ayudar.