search

tailwindlabs / headlessui

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

Combobox with virtual scrolling not showing up #3191

Closed kenn closed 4 months ago

kenn commented 4 months ago

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

For example: v2.0.3

What browser are you using?

Chrome, Brave, Safari, all latest versions

Reproduction URL

https://codesandbox.io/p/devbox/vigorous-chebyshev-3cf9cg

Describe your issue

Given the minimal code example, the combobox won't open when there's virtual={{ options: filteredPeople }} on Combobox and using render props under ComboboxOptions.

The code above is just taken from the blog post.

Screenshot 2024-05-09 at 18 26 04

intsuc commented 4 months ago

If you increase the height of ComboboxOptions to greater than 0, the options should display correctly. The code in the blog post internally does this with p-1.

RobinMalfait commented 4 months ago

Hey!

The example code snippets doesn't provide any styles so you would need to add some styles to make it look pretty. One side effect right now of using virtual mode is that it needs to compute the height of the container and each item to know how many items can be shown. This is also needed to calculate the scrollbar height and position.

If you add some styles such as a padding like @intsuc mentioned then there is some height and the necessary calculations can start.

We will try to improve this, but since you need to add styles anyway I think this is a good workaround for now.

Hope this helps!