Downshift: [useCombobox] selectedItem property value is not enforced

[FezVrasta]

• downshift version: 5.0.0
• node version: codesandbox
• npm (or yarn) version: codesandbox

Relevant code or config

https://codesandbox.io/s/usecombobox-usage-8jgo4

What you did:

Delete the pre-filled text, and select another item.

What happened:

The selected item is updated even though I am setting it to Plutonium by string assignment (you can verify it reading the console logs). I would expect the selecteItem to remain Plutonium since I'm not handling the onSelectedItemChange action.

Reproduction repository:

https://codesandbox.io/s/usecombobox-usage-8jgo4

Suggested solution:

🤷‍♂

[silviuaavram]

There is a disconnect right now between inputValue and selectedItem. If you get selectedItem from the hook (the state value) it will always be Plutonium. I will keep this issue open because I think it's important for us to fix this case: controlling selectedItem should also be reflected in inputValue on selection.

Right now you can workaround by setting the inputValue as well to reflect the real value of selectedItem.

Does this scenario work with vanilla Downshift?

[silviuaavram]

Same as https://github.com/downshift-js/downshift/issues/919

[FezVrasta]

I haven't tried vanilla Downshift and unfortunately I don't have time to right now, I found a workaround (I set a different key to reset the state) and it's good enough for now.

Thanks for taking the time to respond to my issue.

[silviuaavram]

This issue should be prioritised. To recap, the selectedItem is correctly set in the state, but inputValue is not synced with it.

As a workaround I am thinking to setInputValue with the string equivalent of the selectedItem only when you are setting a new selectedItem in controlled mode.

The fix should involve that, every time the selectedItem is set via props to a new value, then the inputValue should pick that up.

[silviuaavram]

Ok, we need to do something similar to what Downshift does. I suspected this is handled in a special way, and found it eventually:

    if (
      isControlledProp(this.props, 'selectedItem') &&
      this.props.selectedItemChanged(
        prevProps.selectedItem,
        this.props.selectedItem,
      )
    ) {
      this.internalSetState({
        type: stateChangeTypes.controlledPropUpdatedSelectedItem,
        inputValue: this.props.itemToString(this.props.selectedItem),
      })
    }

Will provide a fix soon for useCombobox as well.

[silviuaavram]

:tada: This issue has been resolved in version 5.2.1 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[wsielskx]

I think it's still acting weird.

https://codesandbox.io/s/usecombobox-usage-i2lld

After bumping the example from @FezVrasta initial issue, controlled value still can be overridden by internal state of downshift.

[silviuaavram]

https://github.com/downshift-js/downshift/pull/1020 we are fixing both this and the issues introduced by moving from reducer to state. Please check 5.2.3-alpha.1 and see if this is fixed. Also if you can suggest unit tests please go ahead and add them to the PR as a comment, I will add them in the code afterwards.