onPointerDownOutside not working correctly in shadow DOM, select reopening if clicked on trigger while opened

[ivancuric]

Description

If a select component is rendered inside a shadow root, the pointer.down custom event is emitted incorrectly. Both the target and currentTarget properties are the same - the listbox, regardless if you click on the button or outside the listbox.

This results in the listbox not being able to be closed when clicking on the trigger.

I can mitigate this by using this hack:

Link to Reproduction (or Detailed Explanation)

https://stackblitz.com/edit/solidjs-ark-shadow-root?file=src%2FApp.tsx

Steps to Reproduce

try the repro

Ark UI Version

4.5

Framework

• React
• Solid
• Vue

Additional Information

Related issues:
#2716

[ivancuric]

Might have something to do with SolidJS' synthetic events

https://discord.com/channels/722131463138705510/1288156816068317185

Instead of attaching event listeners to every individual element, Solid uses synthetic event delegation, through the on__ form . In this method event listeners are attached to the document element, and dispatch events to the relevant elements as they bubble up.

I already talked in DMs with sage about this: