stateChangeTypes.keyDownArrowDown fires after initial up/down arrow press

[roginfarrer]

• downshift version: 3.2.8

What you did:

I upgraded my version of downshift to v3.2.8 (up from 2.1.4), and discovered this bug.

What happened:

I use stateReducer to modify the highlightedIndex, and I found that when I tabbed to the input with a selected item, and pressed up or down, the highlightedIndex was incorrect.

Reproduction repository:

https://codesandbox.io/s/vnyxvwk673

Problem description:

When you tab to the input, and the menu is not opened, and press the down arrow, the change type Downshift.stateChangeTypes.keyDownArrowDown fires twice. When the up arrow is pressed, it's still fired when after the keyDownUpArrow event fires. I expect it to both not fire when the up arrow is pressed or only once when the down arrow is pressed.

Suggested solution:

Haven't had a chance to debug this yet.

[silviuaavram]

Hello. The fact that you get two events in the reducer is expected. One comes with the isOpen changed, and the other one comes with the highlightedIndex. The reason for this is the fact that on opening we don't know anything about the items. Probably this can be improved because I also prefer only one state changed, with both isOpen and highlightedIndex. If you can look into this that would be nice.

The other part with on Up Arrow the second event comes as Arrow Down is probably a bug. This probably is easier to fix.

From your previous version to this one, the behaviour that changed is that on opening the dropdown by arrow up/down, we will also highlight the last/first item. It's in the ARIA spec on how the widget should work.

Let me know if you need any more info and if you're willing to fix this. That would be awesome! Thanks!

[claytron5000]

I have a potential PR to deal with the double keyDownArrowDown or Down statechange. It includes a new stateChangeType. I'm having trouble running setup, that's another issue. When I get that setup I can offer a fix.

[silviuaavram]

please see my comment in #715

[pranesh239]

I have raised a PR on this issue, please check.

[silviuaavram]

I will leave it as it is. Please use the new useCombobox if you want this behavior, as it will work.

Will be available as soon as I release 4.0.0.

https://downshift.netlify.com/hooks/use-combobox