[Listbox] Wait for mousemove before allowing mouseup to trigger an option select

❓Question

Is there specific reason for Listbox component to select am item on museUp? I’m trying to implement a design where selected ListboxOption is displayed on top of the ListboxButton, similar how https://material-ui.com/components/selects/ does it.

Or like chrome does it with native select tag.

I’m passing a custom position prop to ListboxPopover component that calculates the position - and that seems to work, but when clicking on the ListboxButton happens it immediately closes and does not stay open. Was looking at the Listbox code and it seemed like item selection get’s triggered on mouseUp…

---

Is there a way to do what I’m trying to do? Or is this not possible…?

[chaance]

Addressed in 0.10.1

[marexandre]

@chancestrickland just tried out the master branch and code from listbox/examples/position-over-active.example.tsx - and it worked great out the box and managed to get the design to look like we wanted 😄 Thank you so much for all the changes!

Using querySelector could potentially be a bit fragile if we update something internally that interferes with mount/paint timing.

Could not agree more - as there was no way to get access to the selected option before your updates that was the easier way to prototype on.