Why do these uncontrolled radio inputs require two clicks to be selected?

Question

I have a radio group in a form which uses react-hook-form's useForm hook. Note that the form's mode is set to onChange instead of onSubmit. Both the radio inputs in the group require two clicks to be checked off but, their values are being properly set in one click.

This short GIF will explain my problem better: https://i.stack.imgur.com/GoFAj.jpg

Radio group:

<div>
  <label>Radio group label...</label>
  <div>
    <div>
      <label>
        <span>Yes</span>
          <input
            name="radioName"
            type="radio"
            value={true}
            ref={register}
          />
      </label>
    </div>
    <div>
      <label>
        <span>No</span>
          <input
            name="radioName"
            type="radio"
            value={false}
            ref={register}
          />
      </label>
    </div>
  </div>
</div>

This is the onChange method for the entire form (the console.logs in the GIF are from here):

const handleFormChange = data => {
    console.log(data.radioName)
}

What should I do to have the radio inputs get checked off in one click? Any help is greatly appreciated!

you're missing defaultValue in radio buttons. If you see Material UI documentation, they ask to provide default value in order to keep it controlled https://material-ui.com/api/radio-group/ — Mohit, Jun 08 '20 at 06:48
I tried replacing the `value` prop with `defaultValue` and it's still producing the same result. Also @Mohit, I'm not using Material UI for this form. — cyber5, Jun 08 '20 at 06:54
I copy/pasted this into a codesandbox, it toggle without issue. Can you please include the form code, and whatever if passing/consuming the `register` ref? Whatever the ref is for appears to be interfering with the radio input. — Drew Reese, Jun 08 '20 at 06:59
Can you try to add event.stopPropagation() inside your handleFormChange() method? — Mohit, Jun 08 '20 at 07:02
@DrewReese that's strange. The register ref is required for `react-hook-form` so I can get the radio's value. However, removing the ref still produces the same issue. — cyber5, Jun 08 '20 at 19:00
@Mohit I don't have access to the event object because `react-hook-form` handles the onChange for me. All I receive in the `handleFormChange()` method are the values for each input in the form. I tried `event.stopPropagation()` and `event.preventDefault()` by creating a manual onChange for just these radio buttons but it still didn't work. — cyber5, Jun 08 '20 at 19:04

score 2 · Accepted Answer · answered Jun 08 '20 at 22:16

2

After trying a bunch of possible solutions and testing on other devices, it appears the issue was simply the onChange handler for the whole form. The form code looked something like this:

// handleSubmit is provided by react-hook-form
// handleFormChange prints the value of each form input
<form onChange={handleSubmit(handleFormChange)}>
  {...}
  // radio buttons were here
</form>

The onChange handler was working perfectly but inadvertently causing the radio clicking issue. After removing the onChange, this issue was resolved.

Now, I'm using react-hook-form's watch() method to gather all the values from the form inputs using the following useEffect hook:

let data = watch()

useEffect(() => {
  console.log(data)
}, [data])

This is essentially providing the same result as the onChange handler without the radio button double clicking issue!

answered Jun 08 '20 at 22:16

cyber5

53
7

1

What is odd to me is that the examples on the site doesn't show this need. Thanks for the post. I was pulling my hair on a "double submit needed to get errors" as well. – Sean Jan 03 '21 at 18:51
In this case, how do we select any one radio button as default. ? any idea – Aravin Jun 06 '21 at 06:52
2

@Aravin Have you tried using the `defaultChecked` prop on the input? Take a look at this question: https://stackoverflow.com/questions/45072603 – cyber5 Jun 09 '21 at 19:41
1

defaultChecked woked @Abdullah – Aravin Jun 10 '21 at 05:12

Why do these uncontrolled radio inputs require two clicks to be selected?

1 Answers1