Downshift: Using spacebar to open menu has issues in Firefox

Created on 19 Jun 2018 · 4Comments · Source: downshift-js/downshift

downshift version: 2.0.2
node version: 8.11.2
npm (or yarn) version: 6.1
firefox version: 60.0.2

What you did:
Open Firefox, go to the linked Storybook page, focus the button and then press the spacebar to open (or close) the menu.

What happened:
The menu opens but then closes right after. If you hold the spacebar down the menu will start to flicker between the open and close state.

I also noticed that the onChange event fires when pressing the spacebar, but the selectedItem argument is undefined.

<Downshift 
  onChange={(selectedItem /* this becomes undefined */) => {}}
/>

Reproduction repository:
http://downshift.netlify.com/?selectedKind=Examples&selectedStory=dropdown&full=0&addons=1&stories=1&panelRight=0

Problem description:

Suggested solution:
Not sure what causes the problem so hard to say, Firefox must handle some events differently is my guess.

bug help wanted

Source

alexandernanberg

Most helpful comment

After doing some more research it seems that Firefox does not respect event.preventDefault() on the onKeyDown event handler (still propagates to a click event).

A possible solution would be to add a onKeyUp event handler that executes event.preventDefault(), this will prevent Firefox from firing the click event when pressing the spacebar. Is this a viable solution or will it break something I'm unaware of?

alexandernanberg on 21 Jun 2018

🎉1 👍1

All 4 comments

After doing some more research it seems that Firefox does not respect event.preventDefault() on the onKeyDown event handler (still propagates to a click event).

alexandernanberg on 21 Jun 2018

🎉1 👍1

Why don't you go ahead and open a PR, then we can check out the demos (your PR will automatically be deployed as a preview) in various browsers and see if that fixes it without breaking anything else.