Have Listbox.Options box track the width of the Listbox.Button

[okbytes]

I've got a responsive Listbox in a CSS Grid, but I can't quite figure out how to get the Listbox.Options to track the width of the Listbox.Button. I've tried putting a ref on the Listbox.Button and using a LayoutEffect to update the Listbox.Options width, which works for page load and initial component mount/rendering. Any thoughts or ideas are welcome!

Here's what it looks like if the window is shrunk after page load

Here is that same view with page reload

[calebdeji]

Hi @okbytes , were you able to get your way around this?

[okbytes]

No

[RobinMalfait]

The --button-width CSS variable is exposed on the ListboxOptions component that you can use to constrain the width. You can see an example here:

https://headlessui.com/react/listbox#setting-the-dropdown-width