Downshift: Cannot clear selection once value is selected.

[casperOne]

• downshift version: 1.4.0
• node version: N/A
• npm (or yarn) version: N/A

Reproduction repository:

https://olrv026pz6.codesandbox.io/

Problem description:

Using the example from the Usage page:

• Place the focus on the input element
• Type "app"; the drop down list will show a single element, "apple"
• Click the drop down item, or press Enter to select the "apple" item
• Highlight "apple" in the input field.

At this point, I would expect that hitting Backspace to clear the selection and then using the mouse, hitting Enter, or pressing Tab to leave the input field would clear the value.

However, at this point, the field populates itself with "apple".

My expectation is that the selection would be cleared out given one of those actions.

[kentcdodds]

Hi @casperOne!
Thanks for trying downshift :) This is something you can implement yourself. This kind of behavior is one of those things that has a wide variety of use cases, so I chose a pretty common one when making downshift, and if you want something else to happen, then you can do it yourself: https://codesandbox.io/s/xrzj5l487o

In this example, I added an onChange to the input and had it call clearSelection. I also added a div to render the "Selected Item" so you know what the selected item is. I hope that helps :)

You might also be interested in the Typeahead example: https://codesandbox.io/s/82m2px40q9

Good luck!