Changes to defaultSelectedItem prop does not impact re-rendered input

Thanks for an awesome library! My issue may be related to incorrect usage of the downshift API, but after reviewing the docs, I’m still not sure of the proper way to handle this problem. In short, I’m finding changes in the defaultInput and defaultSelectedItem props in downshift do not result in changes in getInputProps and selectedItem in the arguments in the render prop.

Dependencies:

• downshift version: 1.28.1
• node version: 8.9.4
• npm (or yarn) version: 1.5.1 (yarn)

What I did:

Please check out this forked example in codesandbox. Here’s the relevant snippet:

<ExampleDownshift
  onStateChange={this.handleStateChange}
  // modifying to a controlled input (selectedItem) results in change
  defaultSelectedItem={{ name: this.state.defaultName }}
  onChange={this.handleChange}
  items={this.state.items}
  itemToString={this.itemToString}
/>

I’m then toggling a button that changes the state of the component that wraps ExampleDownshift.

What happened:

When ExampleDownshift re-renders and this.state.defaultName has a new value, the component rendered by Downshift’s render prop does not render the new defaultSelectedItem. In the linked example, my expectation would be that Not Luke Skywalker becomes the new selectedItem instead of Luke Skywalker when pressing the Change default button.

Suggested solution:

I do not have a solution to offer, but my workaround right now is the following (sandbox example here):

const WrappedDownshift = () => (
  <ExampleDownshift
    onStateChange={this.handleStateChange}
    defaultSelectedItem={{ name: this.state.defaultName }}
    onChange={this.handleChange}
    items={this.state.items}
    itemToString={this.itemToString}
  />
);

When WrappedDownshift is rendered, this change now always results in a new Downshift being rendered. I think without this change, Downshift will just call componentWillReceiveProps on each render since it is already mounted, whereas this change will call the component constructor and reset this.state.selectedItem. I am not sure that changing state on componentWillReceiveProps is desirable behavior, but it would resolve this issue I think.

Thanks again for the awesome library; definitely want to be clear that this isn’t necessarily a change request; it’s asking how to use Downshift when you want to change the default selected input.

[BenBrostoff]

Thanks @donysukardi and @austintackaberry - these explanations make sense to me. I’ll use a controlled component 👍

[austintackaberry]

What about something like this:

https://codesandbox.io/s/431w33k8ox

Note that the clearSelection button doesn’t work in my example. The error isn’t very helpful, so I’m not sure exactly what is breaking it, but I think it has something to do with selectedItem being set to null when it’s shape should be {name: someValue}. Nonetheless, the codesandbox should be close to what you’re looking for.

EDIT: I fixed the clearSelection issue 😄