Controller with a Custom Input that has no underlying Ref is not submitting by hitting <enter> key

I have created a custom input that has choice buttons and saves the state of the last clicked button. I could have saved the state in a hidden input field but since the component and its onChange callback will get more complex in future I would like to avoid that. This is the implemenation:

const RadioButtonGroup = ({ value, label, options, onChange }) => {
  const handleClick = (event) => {
    event.preventDefault();
    if (
      options &&
      event.currentTarget &&
      event.currentTarget.dataset &&
      event.currentTarget.dataset.index &&
      onChange
    ) {
      onChange(options[parseInt(event.currentTarget.dataset.index, 10)]);
    }
  };
  return (
    <div>
      {label && <label htmlFor="name">{label}</label>}
      <div>
        {options?.map((option, index) => {
          return (
            <button onClick={handleClick} key={option} data-index={index}>
              {option === value ? "*" : ""}
              {option}
            </button>
          );
        })}
      </div>
    </div>
  );
};

Describe the bug When using the submit button everything works fine. But when I hit the <enter> key there are the following problems:

• The input switches to the first option
• The form would not submit

Also the reset button is not working.

To Reproduce

1. Click on ‘maybe’
2. Click inside the first input
3. Type ‘foo’
4. Hit <enter> key

Also feel free to click the reset button.

Codesandbox link (Required) https://codesandbox.io/s/react-hook-form-controlled-mixed-with-uncontrolled-forked-yrmp5?file=/src/index.js

Expected behavior I would think that the form should behave like clicking the submit button.

Desktop (please complete the following information):

• OS: OSX
• Browser: Chrome
• Version: 84.0.4147.135

Additional context It might be my naive Custom Input implementation, please advise me how to fix that and I’ll promise to contribute to your docs.

[bluebill1049]

Try to follow below: every time the user click on the button store into the state.

const Input = ({value, onChange}) => {
  const [data, setData] = useState(value)
  return <button value={data} onClick={(e)=> { setData(e.target.value); onChange(e.target.value); }} } />
}

[bluebill1049]

I think it’s easier to host the state in useState 👍