[Bug]: Listbox in ShadowDOM Event Loss

[jamesleslie-uom]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

1.4.1

What browser are you using?

Firefox, Chrome, Edge

Reproduction repository

https://github.com/jamesiscool/headless-ui-shadow-dom

Describe your issue

When the Listbox is use within a ShadowDOM clicks on options intermittently don't update the selected value. Some times it happens straight away other times it take 10+ clicks before it starts happening

https://jamesiscool.github.io/headless-ui-shadow-dom/

[blangenfeld]

fwiw, I'm seeing similar behavior with MenuItem clicks using @headlessui/vue.

[rodoneill]

I've just come across this in my project too... super frustrating!

[rodoneill]

After rolling my own solution I found the problem persisted when inside shadow dom. The solution I found was to adjust the document click event listener to use useRef and composedPath

const handleClick = (e) => {
    if (!e.composedPath().includes(node.current)) {
      // click outside of root node
      setIsShowing(false);
      return;
    }
  };

useEffect(() => {
    // add when mounted
    document.addEventListener("mousedown", handleClick);
    // return function to be called when unmounted
    return () => {
      document.removeEventListener("mousedown", handleClick);
    };
  }, []);

Hopefully, this can be of help with making ListBox work as expected when rendered in shadow dom.

What lead me to this solution - https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/

[jamesleslie-uom]

@rodoneill thanks for sharing you fix

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

We currently don't have web components support, but I captured this in a separate discussion so that we can clean things up. Discussion: #874