downshift-js/downshift

ItemClick doesn't work with stateReducer inside an iframe

Open

#1237 aperta il 13 feb 2021

Vedi su GitHub
 (9 commenti) (3 reazioni) (0 assegnatari)JavaScript (980 fork)batch import
bughelp wantedneeds investigation

Metriche repository

Star
 (11.761 star)
Metriche merge PR
 (Merge medio 4g 9h) (7 PR mergiate in 30 g)

Descrizione

  • downshift version: 6.1.0
  • node version: codesandbox
  • npm (or yarn) version: codesandbox

What you did: I tried to combine the default example of multiple select and that state reducer part to achieve my dropdown not being closed after item click. I also wrap it in an iframe(using react-frame-component), cause I have such setup for my components in the documentation environment.

What happened:

ezgif-4-44bd487af032

ItemClick change type doesn't trigger stateReducer, which causes menu to close, although InputKeyDownEnter does.

Reproduction repository:

https://codesandbox.io/s/gallant-meadow-660h4?file=/src/index.js

Problem description: stateReducer doesn't fire with useCombobox.stateChangeTypes.ItemClick inside an iframe

Suggested solution: I could implement the fix with some advise help. Do you have any idea, what causes this?

Guida contributor

Direzione di ricerca
Indaga sulla gestione degli eventi per ItemClick nell'hook useCombobox. Il problema indica che stateReducer non viene attivato per ItemClick quando si trova all'interno di un iframe, mentre InputKeyDownEnter funziona. Esamina il codice sorgente di downshift (probabilmente in src/hooks/useCombobox) per tracciare come viene inviato ItemClick e se chiama stateReducer. Verifica se la propagazione dell'evento viene intercettata dal confine dell'iframe. Il codesandbox di riproduzione (https://codesandbox.io/s/gallant meadow 660h4) dovrebbe essere esaminato per confermare il comportamento. Considera come react frame component potrebbe influenzare la gestione degli eventi e se sia necessaria una soluzione alternativa come l'utilizzo di listener di eventi sul documento dell'iframe.
Tech stack
javascriptreact
Dominio
frontend
Tipo issue
Bug
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
3
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
Mezza giornata
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
Attiva
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
Chiara
Prerequisiti
React hooksdownshift libraryiframe event propagation
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
50