Downshift: Remove selectedItem and clear out inputValue

[glockjt]

• downshift version: 1.25.0
• node version: 6.10.0
• npm (or yarn) version: 5.4.2

Relevant code or config

What you did:

What happened:

How would I clear out the input field and deselect? Would I need to take total control of this component and handle all state changes or is there any built-in methods that I am not seeing? Basically, I have an autocomplete in a form and that field is not a required field I want to be able to edit the form and delete a previously select item from the autocomplete and update the value to be ''. I keep thinking this should act as an input and trigger onChange and clear the selectedItem when I delete the string from the input.

Reproduction repository:

Problem description:

Suggested solution:

[kentcdodds]

To be clear, you want to make it so whatever the user types is what the selected value is, even if it's not one of the items that you call getItemProps with?

Or is it _only_ that you want the user to be able to clear the item if they delete all the text in the input? What if they delete most of the text and change their mind and tab away? What should the selectedItem be in that case?

All of these use cases are supported easily with downshift. But the implementation depends on the nuance of your use case.

[glockjt]

Thanks for the prompt response! I really appreciate it.

The second point. I only want the user to be able to clear the item if they delete all the text in the input. And to your question in that point _What if they partially delete and move on?_ I think it should go back to showing the selected item in the input. Only when the input is completely empty it should change the value to empty and not have a selected item. Sorry if my scenarios are hard to follow.

[kentcdodds]

Here you go: https://codesandbox.io/s/m76r4n9l0x

Here's the important part:

<input
    {...getInputProps({
      onChange: e => {
        if (e.target.value === '') {
          clearSelection()
        }
      },
    })}
  />

Enjoy :)