downshift-js / downshift-js/downshift

ItemClick doesn't work with stateReducer inside an iframe

Offen
#1,237 9 Kommentare 3 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
bug help wanted needs investigation
Vorherrschende Sprache
JavaScript
Sterne
12.3k
Forks
936
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

- `downshift` version: 6.1.0
- `node` version: codesandbox
- `npm` (or `yarn`) version: codesandbox

**What you did**:
I tried to combine the [default example](https://github.com/downshift-js/downshift/tree/master/src/hooks/useMultipleSelection#usage) of multiple select and [that](https://github.com/downshift-js/downshift/tree/master/src/hooks/useCombobox#statereducer) 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](https://user-images.githubusercontent.com/1286563/107861667-6aa04d80-6e58-11eb-9230-2b9646ba73fa.gif)

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?

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der verknüpften CodeSandbox-Reproduktion und vergleiche das Beispiel für Mehrfachauswahl mit dem useCombobox stateReducer-Beispiel, wobei du dich auf useCombobox.stateChangeTypes.ItemClick innerhalb des iframes konzentrierst. Prüfe, warum ItemClick stateReducer nicht erreicht, während InputKeyDownEnter dies tut. Als abgeschlossen gilt die Aufgabe, wenn der Reducer ItemClick im iframe empfängt und das Menü wie konfiguriert geöffnet bleibt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, react
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
25/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.