Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug]: id contains undefined on initial render

See original GitHub issue

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?

Firefox

Reproduction repository

https://headlessui.dev/examples/react-radio-group-hero

Describe your issue

On initial render, the ids of the radio group are headlessui-radiogroup-option-undefined. I also tested the menu component and it has the same issue. Could this be a regression of https://github.com/tailwindlabs/headlessui/issues/110?

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:6

Top GitHub Comments

2reactions

RobinMalfaitcommented, Mar 2, 2022

Hey all!

Doing a big GitHub cleanup. Our conversation is spread across multiple months (sorry about that!). I think that it is a good trade-off for now and we probably eventually want to fix this, but instead of fixing this ourselves, I think it would nice to use the new useId that React is providing.

Once we are working (and relying) on React 18 (improved) support, this should hopefully fix itself.

0reactions

valerie-makescommented, Dec 12, 2021

Ah, I see from the Reach UI useId hook, which is also used by Headless UI, that rendering order can be nondeterministic when using React concurrent mode, so my previous assumption is wrong. They’ve heavily documented why they believe this approach is the best compromise.

That said, if you disable JavaScript then you can’t use any of these components anyway so it might not be a big deal.

I think I agree with this having now understood the logic behind the useId hook - it results in “invalid” HTML, but it improves usability in practice since JavaScript is required for these components anyway.