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

Aperta
#382 0 commenti 2 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
42/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Inizia con la logica inPopupOrChild nel pacchetto trigger e riproduci il comportamento usando il CodeSandbox collegato all'interno di uno Shadow DOM. Traccia il modo in cui gli eventi mousedown e click vengono retargetizzati, quindi verifica che facendo clic al di fuori del popover questo si chiuda, mentre facendo clic sul trigger o sul contenuto del popover non si chiuda.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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

Lingua principale
TypeScript
Stelle
391
Fork
245
Nessuna PR unita negli ultimi 30g

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di react-component/trigger

Tutte le issue di react-component/trigger

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.