RAC: How to add a Button within a ListBoxItem that doesn't select the option?

[raleighwavv]

I'm trying to add a button within a Select option that performs a separate action (play an audio file) than the option itself.
Despite attempts at using preventDefault and/or stopPropagation, the Select option still gets selected when the button is pressed. I understand this probably goes against accessibility practices, so I tried implementing a GridList with DialogTrigger + Popover. However, as stated in another question (#7100) the GridList does not currently support arrow key navigation due to lack of focus (this seems to be fixed on a nightly version of RAC).

So I'm curious if there is any workaround or alternative to help solve an issue like this? Are there any escape hatches to override the default Select option behavior? Or are there any stable-release solutions in order to use a GridList inside a popover in a Select type fashion?

Thanks so much!

[snowystinger]

You can't add a button inside a Select Option, no interactive children are allowed inside ListBoxes. There is no workaround for this, this is the aria spec implemented. You are going the correct route with GridList, and the issue you linked is fixed as you noted and available in the nightly version. We will be releasing it in the next week or two.

Does using the nightly resolve the issue for you? If the nightly is doing something else you aren't ready for yet, you can use patch-package to apply just that fix (that PR was very small).

Thanks for your understanding and patience.

[raleighwavv]

Thanks so much for the reply and advice.