Is there a way to have an element inside a Select.Item that prevents the select from closing?

[maximedupre]

Not sure if this is a feature request, or if it can already be done.

Basically, I have a play button inside every select item. When I click on it, it should play a preview, but also keep the select open (see attached image).

I have tried

e.stopImmediatePropagation();
e.stopPropagation();
e.preventDefault();

on the click handler of the button, but no success. I have also tried onclickcapture, but still no success. There is probably a capture event handler that comes before, so my attempt at stopping propagation is failing.

Is there currently a way to keep the select open while clicking on a children element of a Select.Item? :)

[huntabyte]

Hey @maximedupre,

The Select component follows the Listbox pattern which to my understanding only supports role="option" and role="group" as descendants, Select.Content in this case being role="listbox".

I'm working on this in the background, specifically by adding more components that give flexibility for UIs like this, where you don't need to violate every accessibility rule in the book to get the behavior you want. This behavior is the ability to select an item while having additional functionality for each, and would really fall under the "grid" pattern inside of a popup.

However, I'll only advise you on what the correct practices are, I won't prevent you from going against them, especially since Bits doesn't have a component that safely offers this capability.

---

We use the onpointerup event to trigger selection, so you can do the following:

<button onpointerup={(e) => e.stopPropagation()}>
  Play
</button>