Dropdown does not work properly in the Shadow DOM

[Jaggler3]

Reproduction link

Steps to reproduce

Click each dropdown/trigger twice and observe the open/closing effect.

What is expected?

It is expected for the dropdown in the web component to open on the first click and close on the 2nd click

What is actually happening?

The dropdown in the web component is opening on the first click, and closing of the 2nd mouse-down, and reopening on the following mouse-up.

Environment	Info
antd	4.20.7
React	(latest) 18.1.0
System	macOS 12.3.1
Browser	Brave: Version 1.39.111 Chromium: 102.0.5005.61 (Official Build) (x86_64)

---

The actual problem lies in rc-trigger, which is used by rc-dropdown which Ant Design uses for it's Dropdown component. It tries to reference the root of the element by using element.ownerDocument, which returns the #document almost always, when in certain cases we would want it to return a #shadow-root.

My current workaround:

const CustomDropdown = (props) =>

  const documentElement = useMemo(() => {
    if (!props.getPopupContainer) return
    const popupContainer = props.getPopupContainer()
    if (!popupContainer) return
    const newDocumentElement = popupContainer.getRootNode()
    const owner = popupContainer.ownerDocument
    if (newDocumentElement !== owner && !newDocumentElement.createElement) {
      newDocumentElement.createElement = (...args) => document.createElement(...args)
    }
    return newDocumentElement
  }, [props.getPopupContainer])

  return (
    <AntdDropdown
      // begin rc-trigger props
      getDocument={documentElement && (() => documentElement)}
      // end rc-trigger props
      {...props}
    > ...

I'm using a prop that is eventually passed down to rc-trigger, though I do not think it is specified anywhere in the documentation that this is possible.

[github-actions]

You may look for issues:

1. 59% Form's normalize does not work correctly with InputNumber #34162
2. 56% Title does not work when hovering over a submenu #35035
3. 56% Tooltip trigger=["focus", "hover"] does not work properly together #34064
4. 56% Select clear button does not work on iPad #28917
5. 52% Collapse animation is not working when added inside a dropdown #34378

_{🤖 By issues-similarity-analysis}

[Jaggler3]

I've updated the CodeSandbox to include all broken components, which are:

Dropdown,
Menu,
Popover,
Tooltip,
Popconfirm

[MadCcc]

Your workaround is reasonable, and you can config this with ConfigProvider.
getDocument is not stable currently and we may not specify it in docs of antd.

[errolgr]

I ran into this issue and was able to resolve this by using a ref from the parent component

  <Dropdown
             getPopupContainer={() => ref.current}
>...

[scarqin]

or

const shadowRoot = root.attachShadow({ mode: 'open' })

...

  <ConfigProvider>
...
          getPopupContainer={(node) => {
            return shadowRoot
          }}
</ConfigProvider>