forge42dev / remix-hook-form

Open source wrapper for react-hook-form aimed at Remix.run
MIT License
354 stars 29 forks source link

Radio inputs have both `value` and `defaultValue` props defined #31

Closed cdoolin closed 1 year ago

cdoolin commented 1 year ago

When moving from base react-hook-form to remix-hook-form the browser console (Firefox) started showing this error:

Warning: DetailsForm contains an input of type radio with both value and defaultValue props. Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props. More info: https://reactjs.org/link/controlled-components

This is happening with radio inputs defined with the register function from userRemixForm:

<label className="space-x-1">
  <input
    type="radio"
    {...register('accountType')}
    value="personal"
  />
  <span>Personal</span>
</label>
<label className="space-x-1">
  <input
    type="radio"
    {...register('accountType')}
    value="corporate"
  />
  <span>Corporate</span>
</label>

I solved this by restructuring register to remove the defaultValue key, but that's not particularly pretty.

Thanks for the great library!

AlemTuzlak commented 1 year ago

@cdoolin from v2.0.2 you can pass in an option { disableProgressiveEnhancement: true } on your controlled components!

cdoolin commented 1 year ago

Thank you!