RadioGroup is unreachable with keyboard if none of the options are checked

[BjornDCode]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.0.0

What browser are you using?

Chrome

Reproduction repository

https://codesandbox.io/s/elated-yonath-thyp7?file=/src/App.js

Description

Because all RadioGroup.Option elements have tabindex=-1 unless they are checked it's not currently possible to reach a RadioGroup by keyboard if the default value of the RadioGroup is null. Normal browser behaviour is to focus the first option if tabbing forward and focus the last element if tabbing backwards

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

The issue you are seeing is because you are using null as the default value. This can technically be a valid option of your radio items. Here is a small React application where we can showcase that: https://codesandbox.io/s/gifted-firefly-50qwq?file=/src/App.js

Here is a small React application that showcases that null could be a value when using Headless UI: https://codesandbox.io/s/boring-oskar-260ts

To fix it in your case, I would recommend you to change your null to undefined, which works as expected: https://codesandbox.io/s/quirky-bose-q5p2r?file=/src/App.js

If you have any more questions, please let me know!

[RobinMalfait]

But you are right that this feels incorrect. In fact, not being able to tab at all is a bug, so will fix that and will get back to you!

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This should be fixed, and will be available in the next release.
You can already try it using npm install @headlessui/react@dev or yarn add @headlessui/react@dev.

Here is your reproduction CodeSandbox with the newest dev version applied: https://codesandbox.io/s/inspiring-volhard-5uljb