Click events/HTML injection not working correctly in Shadow DOM?

[nlrowe]

I am attempting to use react-select in a custom web component using the shadow DOM but it is not performing as expected.

The menu does not open if I click in the select input box. It does open if I click on the drop down indicator, but it does not add the (what appears to be) screen reader span that I see added when I am using it outside of the shadow DOM. I suspect that it may not be working as intended even if it does pop the menu.

It is also not showing search text properly in the select. You can see clipped text in a very small space at the beginning of the input.

Please find repro here: https://codesandbox.io/s/admiring-northcutt-x99vn

[nlrowe]

After further debugging, it seems the issues lied in the react-shadow-dom-retarget-events dependency. A very similar issue has been filed against the library: spring-media/react-shadow-dom-retarget-events#13.

Doing some more digging around I was able to find facebook/react#9242 on the react repository. I implemented the suggested 'fix' from this comment facebook/react#9242 (comment). It is not really ideal, but it works in the absence of anyone making react events first class citizens for shadow DOM use.