Cannot click on items within useSelect when mounted in the shadow DOM

[pzaczkiewicz-athenahealth]

• downshift version: 9.0.8
• node version: 20.15.1
• npm (or yarn) version: npm@10.7.0

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.

[silviuaavram]

Not sure why would you need this usage, with the button in the li that has the onclick which uses an imperative function. I'm not in favour of changing our code to account for all kinds of usages that could come up. Clicking the li should change your selected item. So why doing the button thing?

[pzaczkiewicz-athenahealth]

Since 2020, we're using useSelect to implement a Menu, not a "Select" as a part of a design system. Individual items are typically implemented with <a> or <button> to either navigate to a different page, or execute arbitrary javascript. Supporting the shadow DOM is a core feature of our design system, so if there's a regression compared to only existing in the light DOM, then we'd be inclined to drop downshift.

[lmestel]

I have the same issue with useCombobox.
We provide our React app as a web component and also run in a shadow DOM.

We tried to solve this via the environment prop, but then the list does not open when you initially click into the field.

environment: {
  addEventListener: shadowRoot.addEventListener.bind(shadowRoot),
  removeEventListener: shadowRoot.removeEventListener.bind(root),
  document,
  Node,
},