react / react/react

Bug: Events in shadow dom get duplicated when bubbling

Aperta
#24,136 3 commenti 4 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Component: DOM Status: Unconfirmed Type: Bug
Lingua principale
JavaScript
Stelle
251k
Fork
51.4k
Merge medio
2g 4h
PR unite (30g)
53

Descrizione

Events dispatching from inside a shadow-root will be handled multiple times while bubbling up the virtual DOM tree. I suspect this is because of event retargeting when crossing the boundary of the shadow dom.

React version: 17.0+, including 18-rc2

Steps To Reproduce

Click on the button in the code example below:

https://codesandbox.io/s/react-shadow-dom-event-doubling-msgnj1

The current behavior

onDivClicked is called twice per click on the button.

The expected behavior

onDivClicked should only be called once per handled click.

Guida per i contributori

Apri la guida per i contributori

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.

Direzione di ricerca

Inizia con la riproduzione collegata di CodeSandbox e analizza come il clic attraversa il confine dello shadow-root in React 17 e 18. Il lavoro è completato quando onDivClicked viene invocato una volta per ogni clic sul pulsante durante la propagazione dell'evento e il caso riprodotto è coperto da un test di regressione.

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

Valutazione

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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.