Listbox with multi select: prevent opening/closing ListboxOptions when clicking specific element within ListboxButton

[romankoho]

I have implemented a component for selecting multiple options with Listbox.
I am rendering the selected options within the ListboxButton (once options were selected). The selected options have an "X" icon. When clicking it, I am removing the option from the selected values

My problem:
Whenever clicking the "X" the ListboxOptions-Modal opens/closes. How can I prevent this behavior when clicking on the icon?

You can find the code here:
https://stackblitz.com/edit/vitejs-vite-uobms2n7?file=vite.config.ts,src%2Findex.css,src%2FApp.tsx,src%2FSelect.tsx,package.json,src%2Ftypes.ts&file=src%2FSelect.tsx&terminal=dev

[romankoho]

I found the answer. The ListboxOptions opens onPointerDown event and not onClick. So all you have to do is to stopPropagation of the onPointerDown event

https://github.com/tailwindlabs/headlessui/releases/tag/%40headlessui%2Freact%40v2.2.3