Add interactive elements within a select option

[AinaVendrell]

Hi,

I've created a select component using the useSelect hook from React Aria. I would like to reuse this component in various parts of my application where I need to add interactive elements like links or buttons within the options. However, I'm encountering an issue: when the user clicks on the button or link, the option gets selected, and I don't receive any events in the onPress method of the button and the links won't open.

How can I implement this functionality?

Here is the CodeSandbox demonstrating my current implementation.

[reidbarber]

useSelect is meant to be combined with useListBox, and the ARIA listbox pattern does not support having interactive elements within items. useGridList does support interactive elements within items, but it isn't meant to be combined with useSelect, and won't be exposed to assistive technology in the same way.