Repository navigation
rc-trigger Does not work in a Shadow DOM #301
Description
Activity
@Jaggler3 your Sandbox is working for me; maybe the React version was < 17?
I can reproduce with your Sandbox, once downgraded to the latest 16.14 version. There was a very popular issue to the broken event stack, which has been fixed in 17.Thank you for taking a look @davidenke
The React version specified in the CodeSandbox is 17.0.2. You were able to open & close the dropdowns in both the "In Web Component" and "Expected" sections the same way? (2nd click quickly closes and reopens the dropdown)In case this is a browser issue, I am on Brave (chromium)
https://github.com/react-component/trigger/blob/master/src/index.tsx#L37
^ This is the function I traced it back to that I had replaced via prop.element.ownerDocumentdisregards the shadow DOM.I just tried to downgrade the CodeSandbox to 16.14 and the dropdown won't open at all, that may be related to the issue you linked?
@Jaggler3, yes, both version work for me on latest Chrome on macOS 12.4. After downgrading to React 16 I was able to reproduce the behaviour you described, so I shared my findings about the changes in the react event system :)
Nevertheless
element.ownerDocumentwould behave the same, either within a shadow root or not - the question is if this is wanted, though. Most of the time I had issues withelement.getRootNode()which delivers a reference to the closest shadow root instead of thedocument...That makes sense. In my case I encountered the issue because it was injecting CSS into the
ownerDocumentwhich needs to be the shadow root because styles from the document don't trickle into it, but if that function is used for other things which need to return thedocumentor relevantiframeeven while in a shadow root I see where a problem could arise.Can you help to try the new package
@rc-component/trigger?To be specific, mouseEnter / mouseLeave won’t work in React 16 Shadow DOM
react/react#8117 (comment)and that's what
rc-triggerneed to trigger the hover state.Upgrade to React 17 work but it might break some styled-components used from other UI libraries so I added some overrides to overcome the consequences too
"pnpm": { "overrides": { "react": "^17.0.2", "react-dom": "^17.0.2" } }
Found this issue using the Ant Design package and traced it down to this dependency.
Reference: ant-design/ant-design#35897
Reproduce: https://codesandbox.io/s/ant-design-web-component-issues-lx7d2v?file=/index.js
Workaround is to pass this prop:
documentElementis retrieved usinggetRootNode()of the trigger element and also needs to addcreateElementto it becauserc-triggerthinks it is a document object.