search

tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
26.21k stars 1.09k forks source link

Listbox options not works when its static #3130

Closed mohammadhosseinmoradi closed 6 months ago

mohammadhosseinmoradi commented 6 months ago

Describe your issue

Listbox.Option not changed when Listbox.Options is static must be change Listbox.Options key to reflect changes but when it's multiple works fine.

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v2.0.0-alpha.4

Issues repo

RobinMalfait commented 6 months ago

Hey!

The static prop means that you are in charge of rendering the options conditionally based on the open state. This is useful if you want to use transitions using framer motion for example because the listbox options are now ignoring the internal open state for its rendering purposes. The internal open state is still required for the component to function correctly.

You are currently rendering the Listbox options without a ListboxButton, this means that the Listbox can never be in an open state so it won't work as expected.

The functionality you are trying to create (always show listbox options, such that you don't have to open the listbox) is functionality we currently don't have.

Depending on your exact use case, it might be better to use a RadioGroup https://headlessui.com/react/radio-group

mohammadhosseinmoradi commented 6 months ago

Thanks for your reply Mr. Robin.

But it is good to have a listbox (single, multiple) with keyboard navigation that is static and does not open inside the modal. I have encountered this issue frequently where the list inside the modal doesn't render. I felt that the static prop meant that.