[BUG] - Cannot stop propagation of Button in endContent of SelectItem

[spencerjsmall]

HeroUI Version

2.7.0

Describe the bug

When a button is placed in the endContent of a SelectItem, clicking the button not only triggers the button's action but also selects the item and closes the select popover. This prevents the button from functioning independently within the select item.

I've tried the following workarounds without success:

• Using e.stopPropagation() in the button's onClick handler
• Using e.preventDefault() in the button's onClick handler
• Using onPointerDown with e.stopPropagation() and e.currentTarget.focus()

None of these solutions prevented the select action from being triggered. I know this is kind of an anti-pattern, but it's also not unheard of. For the time being, I have a workaround using Popover and Listbox, as I'm able to stop the propagation of the click event from a ListboxItem's endContent.

Your Example Website or App

https://stackblitz.com/~/github.com/spencerjsmall/vite-template

Steps to Reproduce the Bug or Issue

1. Create a Select component with multiple SelectItems
2. Add a button to the endContent of one or more SelectItems
3. Open the Select dropdown
4. Attempt to click the button within a SelectItem

Expected behavior

Clicking the button should only trigger the button's action without selecting the item or closing the select popover.

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[linear]

ENG-2177 [BUG] - Cannot stop propagation of `Button` in `endContent` of `SelectItem`