react-component / react-component/trigger
Click-away (close on outside click) does not work in ShadowDom for action "click"
Personne n'a encore pris cette issue.
- Langage dominant
- TypeScript
- Étoiles
- 391
- Forks
- 245
- Métriques de merge des PR
- Aucune PR mergée en 30 j
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.
Guide de contribution
Aucun guide de contribution indexé pour ce dépôt
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Commencez par la logique inPopupOrChild dans le package trigger et reproduisez le comportement à l’aide du CodeSandbox lié à l’intérieur d’un Shadow DOM. Suivez la manière dont les événements mousedown et click sont retargetés, puis vérifiez qu’un clic en dehors du popover le ferme, tandis qu’un clic sur le trigger ou le contenu du popover ne le ferme pas.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- react, typescript
- Domaine
- frontend
- Type d'issue
- Bug
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 42/100