downshift-js/downshift

ItemClick doesn't work with stateReducer inside an iframe

Open

#1237 opened on Feb 13, 2021

View on GitHub
 (9 comments) (3 reactions) (0 assignees)JavaScript (11,761 stars) (980 forks)batch import
bughelp wantedneeds investigation

Description

  • 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?

Contributor guide

Tech stack
javascriptreact
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
React hooksdownshift libraryiframe event propagation
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
Investigate the event handling for ItemClick in the useCombobox hook. The issue indicates that the stateReducer does not fire for ItemClick when inside an iframe, while InputKeyDownEnter works. Look at the downshift source code (likely in src/hooks/useCombobox) to trace how ItemClick is dispatched and whether it calls the stateReducer. Check if the event propagation is intercepted by the iframe boundary. The reproduction codesandbox (https://codesandbox.io/s/gallant meadow 660h4) should be examined to confirm the behavior. Consider how react frame component might affect event handling and if a workaround like using event listeners on the iframe document is needed.