[Preact, RHF 7.0] Radio inputs not working

Describe the bug Radio inputs aren’t working correctly in Preact project after upgrading to the latest RHF version. Only last selected input produces a value, other input values are shown as null.

To Reproduce Steps to reproduce the behavior:

1. Go to the Codesandbox example
2. Click on ‘One’, click ‘Submit’
3. {test: null} is logged to the console
4. Click on ‘Three’, click ‘Submit’
5. {test: "three"} is logged to the console

Codesandbox link (Required) https://codesandbox.io/s/funny-saha-1dr1e?file=/src/index.js

Expected behavior All radio inputs produce values.

Screenshots N/A

Desktop:

• OS: Windows
• Browser: Edge
• Version: 89

Additional context Not sure if Preact compatibility is something that has any priority, just wanted to report this as it worked in RHF 6.

[leapful]

@r04423

There is an use case to show/hide input element that needs “document.contains”, while the “detached” DOM element and “not attached yet” DOM element have the same behavior, it’s hard to define a handling for use case of Preact.

I would suggest another workaround to keep using “register” instead of using Controller:

const { register } = useForm();

const customRegister = (name, options) => {
  const { ref, ...field } = register(name, options);
  
  const customRef = (...args) => {
    setTimeout(() => ref(...args));
  }
  
  return { ...field, ref: customRef };
}

// Just use "customRegister" instead of "register"

<input {...customRegister('test')} id="one" />
<input {...customRegister('test')} id="two" />
<input {...customRegister('test') id="three" }/>

[r04423]

@leapful and @bluebill1049 thank you so much for looking into this!

And indeed, this workaround does seem to work 👍