Setting the selectedItem to '' does not clear the inputValue

• downshift version: 1.16.0
• node version:
• npm (or yarn) version:

What you did: I have a component that lists several items using several “Downshift-enriched” inputs. At the end of the list there is an empty Downshift-enriched input for adding a new item to the list. As such the components are semi-controlled, in the sense that the selectedItem property is set by the parent component.

What happened: If I select a new item using the last input component I would expect that a new empty input component appears after the last one. However, it appears a new input component where the input value is the one selected before.

Reproduction repository: https://codesandbox.io/s/k5px1z0075 Select a fruit (apple for example) in the only input that appears and see that two components have the same fruit (instead of being one selected and the other one empty).

Problem description: Maybe setting to null or '' the selectedItem prop does not correctly clear the internal state.

[kentcdodds]

If you would be willing, I would appreciate a pull request that demonstrates this approach in source, tests, and a new example. Could you do that? Thanks so much for iterating with me on this!

[davvidbaker]

Just ran into this same problem, and happy to find you guys already figured it out! This is what I ❤️ about open-source. Thanks for all your hard work!