react-component / react-component/trigger
Click-away (close on outside click) does not work in ShadowDom for action "click"
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.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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