Floating UI / Virtual with extra header element
Hi, I'm using the Floating UI Select / Virtual example as a base:
https://codesandbox.io/p/sandbox/l10rjs
With my updates:
https://codesandbox.io/p/sandbox/nostalgic-tristan-skfs9t
What I wanted to do is add a header to the dropdown. But this seemingly simple addition seems to break the virtualization in terms of scrolling. Specifically, I changed the top level wrapper element to a flexbox and moved the
overflow: auto down to the list div and changed getScrollElement to that list div (wrapperRef). I hardcoded the app to select item #301, and when I open the menu, I expect it to jump to item #301, but it doesn't.
I'm not sure how to solve this issue. Any ideas?0 Replies