rc-trigger Does not work in a Shadow DOM

[Jaggler3]

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:

getDocument={documentElement && (() => documentElement)} // documentElement is a modified shadow-root

documentElement is retrieved using getRootNode() of the trigger element and also needs to add createElement to it because rc-trigger thinks it is a document object.

[davidenke]

@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.

[Jaggler3]

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.ownerDocument disregards 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?

[davidenke]

@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.ownerDocument would 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 with element.getRootNode() which delivers a reference to the closest shadow root instead of the document...

[Jaggler3]

That makes sense. In my case I encountered the issue because it was injecting CSS into the ownerDocument which 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 the document or relevant iframe even while in a shadow root I see where a problem could arise.

[yoyo837]

Can you help to try the new package @rc-component/trigger?

[coolcorexix]

To be specific, mouseEnter / mouseLeave won’t work in React 16 Shadow DOM
facebook/react#8117 (comment)

and that's what rc-trigger need 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"
    }
  }