downshift-js/downshift

ItemClick doesn't work with stateReducer inside an iframe

Open

#1,237 建立於 2021年2月13日

在 GitHub 查看
 (9 留言) (3 反應) (0 負責人)JavaScript (11,761 star) (980 fork)batch import
bughelp wantedneeds investigation

描述

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

貢獻者指南

技術棧
javascriptreact
領域
frontend
議題類型
bug
難度面向新貢獻者的預計實作難度，1 表示很小改動，5 表示專家級工作。
3
預計時間有經驗貢獻者完成調查、實作、測試並準備 pull request 的粗略時間範圍。
half day
活動狀態議題目前的可參與程度：新鮮、活躍、陳舊、阻塞或等待維護者輸入。
active
清晰度議題是否清楚說明預期改動、驗收標準和下一步。
clear
前置要求
React hooksdownshift libraryiframe event propagation
新手友善度1-100 的估計分數，表示該議題對首次貢獻者的友善程度。
50
研究方向
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.