Downshift hooks discard previous action dispatch changes if a new action is dispatched

[karangarg45]

• downshift version: 6.0.5
• node version: 12.10.0
• npm (or yarn) version:

Relevant code or config

CodeSandbox example https://codesandbox.io/s/cranky-davinci-52kny?file=/src/hooks/useCombobox/controlling-state.js

What you did:

I added an event handler on the input focus in the useCombobox example. The event handler calls the openMenu function.

What happened:

If you select an item from the dropdown, the handleSelectedItemChange function is never called. I did some debugging around this and these were my observations.

When an item is selected, downshift calls the focus on the input ref here https://github.com/downshift-js/downshift/blob/master/src/hooks/useCombobox/index.js#L290 Before calling the focus on the ref downshift dispatches an action when an item is selected here https://github.com/downshift-js/downshift/blob/master/src/hooks/useCombobox/index.js#L284 But as soon as the input focus is triggered i call the openMenu function which dispatches a new action and discard the changes that should have been triggered due to itemClick action.

Currently i can fix this by having an extra check in the inputFocus event handler and which is also the right thing to do

  const onInputFocus = () => {
    !isOpen && openMenu()
  }

When i add the above check everything works fine, but i just wanted to confirm if this is something by design ? Also if put a debugger on the line https://github.com/downshift-js/downshift/blob/master/src/hooks/useCombobox/index.js#L284 the bug is not reproducible

Reproduction repository: The codesandbox example has been shared above

Problem description:

Suggested solution:

[silviuaavram]

That's unfortunate. Do you think the focus management in useCombobobx can be improved?

[karangarg45]

I am not sure if this scenario is only limited to the focus event. So downshift get the refs and call the methods on refs (onFocus/onBlur). Currently downshift only calls the focus on inputRef but in future there could be logic that downshift also calls more methods on the refs. This becomes a problem where user has an event handler for these events and those event handlers change downshift state. Ideally downshift should not discard previous action dispatch which was in progress if user changes the state of the downshift.

[jorgemoya]

Good catch, I'm experiencing this same problem after upgrading from 5.2.2. Fix partially fixes one of my issues, still debugging another one.

[silviuaavram]

I see. The question remains the same, can the code be improved and can a PR be submitted? Thank you!

[silviuaavram]

Since v7 the menu is opened on focus, but it will get changed to toggle the menu on input click, and the focus open will be removed in v8.