react-component / react-component/trigger

Click-away (close on outside click) does not work in ShadowDom for action "click"

Open
#382 0 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

When using the popover from Antd in a WebComponent with the "click" action the "click away" does not work, the popover is never closed. When clicking on the trigger button the popover is closed.

<Popover content={<div>demo</div>} title="Title" trigger="click">
 <Button>Click me</Button>
</Popover>

Expected:
Clicking on anything other than the popover content or the trigger (button in this case) the popover should close.

Actuall:
The popover is not closed.

Findings:
When using a popover from Antd inside a ShadoDom and using the trigger "click" the inPopupOrChild incorrectly thinks the mousedown/click is inside the content. There is something wrong in the checking of inPopupOrChild. The event retargeting makes the event come from the webcomponent and somehow the trigger thinks this is inside the content.

Workaround:
Catch the onMouseDown event in the webcomponent ctor and stop the bubbling with stopPropagation stops the event from reaching the global listener a second time.

Repro:
https://codesandbox.io/p/devbox/modest-frog-tm3r6v

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.

Research direction

Start with the inPopupOrChild logic in the trigger package and reproduce the behavior using the linked CodeSandbox inside a Shadow DOM. Trace how the mousedown and click events are retargeted, then verify that clicking outside the popover closes it while clicking the trigger or popover content does not.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.