Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ItemClick doesn't work with stateReducer inside an iframe #1237

Open
DeyLak opened this issue Feb 13, 2021 · 9 comments
Open

ItemClick doesn't work with stateReducer inside an iframe #1237

DeyLak opened this issue Feb 13, 2021 · 9 comments

Comments

@DeyLak
Copy link

DeyLak commented Feb 13, 2021

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

@silviuaavram
Copy link
Collaborator

Indeed it's broken. It triggers a blur instead of item click. It should be investigated. Maybe something in our logic that triggers input blur is broken. Maybe in useMouseAndTouchTracker does not work as expected when a different window is used. Is this something you can look into?

@jenn-jenn
Copy link

jenn-jenn commented Feb 16, 2021

@silviuaavram Line 127 passed in [comboboxRef, menuRef, toggleButtonRef]. Was there a reason why itemRefs did not need to be passed? the same thing is happening for useSelect

@silviuaavram
Copy link
Collaborator

Well, it was not needed. The function was copy pasted from Downshift, added to a hook to be re-used, and it was not needing any items for its purpose. @jenn-jenn But if the fix requires the items to be passed I have no problem with that.

@silviuaavram
Copy link
Collaborator

@DeyLak @jenn-jenn Can you check if 6.1.2-alpha.0 fixes this? It may be related to #1255 but I'm not sure.

@rrabii
Copy link

rrabii commented May 31, 2021

Any update on this. The issue is still reproduceable.

But only when used iframe in iOS browsers.

@DeyLak did you manage to get this fixed, facing the similar issue. @silviuaavram updated to 6.1.3 but still has the same issue.

Any help will be appreciated.

@silviuaavram
Copy link
Collaborator

@rrabii can you go ahead and try to fix it? I am unable to work on this at the moment, but if you submit a PR and looks good I will merge it. Thanks!

@rrabii
Copy link

rrabii commented May 31, 2021

@silviuaavram alright, will take a look.

@amabunny
Copy link

amabunny commented Aug 3, 2021

Any progress with this issue?

@amabunny
Copy link

amabunny commented Aug 3, 2021

image

At least that insane hack helped. It's strange, but callbacks created in React doesn't fires click event. Didn't found any issues in source code. It's weird...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants