`rc-trigger` Does not work in a Shadow DOM

Open
#301 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
42/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
react, typescript
Domain
frontend

Research direction

Start with the linked CodeSandbox's index.js and reproduce the failure in a Shadow DOM. Trace the getDocument workaround and the trigger element's getRootNode() result, including the missing createElement behavior. Done means rc-trigger works in a Shadow DOM without requiring that workaround, with the reproduction confirming popup behavior.

Written by the indexing model from the issue text.

Description

Found this issue using the Ant Design package and traced it down to this dependency.

Reference: https://github.com/ant-design/ant-design/issues/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.

Dominant language
TypeScript
Stars
391
Forks
245
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from react-component/trigger

All issues in react-component/trigger

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.