downshift-js / downshift

🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.

Home Page:http://downshift-js.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

State change occurs before hitting reducer on Enter key

okonet opened this issue · comments

  • downshift version: 7.6.0
  • node version: 20
  • npm (or yarn) version: 1.9

What you did:

I was trying to implement a customer request to keep the input's field value intact after selecting. So I tried doing this in the stateReducer:

const { changes, type } = actionAndChanges;
switch (type) {
    case stateChangeTypes.InputKeyDownEnter:
    case stateChangeTypes.ItemClick:
      return {
        ...changes,
        inputValue: state.inputValue, // Keep the previous input value.
      };
    default:
      return changes;
}

That didn't work so after printing the state and changes I found out that it's already having both selectedItem and inputValue set. In my understanding that should happen in the reducer, so the state should not have those values set, and changes should. After returning changes, the new state should be updated.

What happened:

CleanShot 2023-07-04 at 09 58 08@2x

Suggested solution:

I'm not sure but it seems like the state was already update prior the reducer function was called.

I think it might be a duplicate of #759

@okonet can you create a full code sandbox with the issue you are facing? There may be something wrong with your implementation.

You can also check our examples repo: https://codesandbox.io/s/github/kentcdodds/downshift-examples

You will find a stateReducer example there for useCombobox, if that's what you are using. Just replace the uppercase thing from there with state.inputValue and it should be good to go. Thanks!