Combobox with virtual scrolling not showing up
kenn opened this issue · comments
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.
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.
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!