• downshift version: 9.0.8
• node version: 20.15.1
• npm (or yarn) version: [email protected]

Relevant code or config

https://github.com/pzaczkiewicz-athenahealth/downshift-shadow-dom-bug

What you did:

Define DownshiftSelect based on default usage such that instead of relying on selectedItem from useSelect, has a <button onClick={() => setSelectedItem(item)}>{item}</button>. Wrap that in a shadow root.

What happened:

The button's onClick will never fire.

Reproduction repository:

https://github.com/pzaczkiewicz-athenahealth/downshift-shadow-dom-bug

Problem description:

useMouseAndTouchTracker adds a bunch of event listeners to document in order to tell if the Select is open or not, but event.target represents the last <div> in the light DOM, rather than the <li> within the shadow DOM. Thus, targetWithinDownshift always fails, and the Select is closed before the button's onClick is able to be called.

While I can define my own environment object rooted on the shadow Root, that would cause clicks in the light DOM to not close the Select.

Suggested solution:

Instead of event.target, use event.composedPath()[0], as that will drill into the shadow DOM. This implementation will still work if there is no shadow DOM.