Input field examples

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

Are there any examples where we need to have some more control over the input field or where the control functions like react-select.

A few things that I’m trying to achieve that I’m not able to figure out from the examples/documentation.

The input field should already be populated with a value when the control is first shown. When the user clicks in the input field, I would like the menu to open, the existing text/value should be removed and the cursor placed at the beginning of the input for the user to filter the full list. If the user cancels after typing some text, the existing value still stays, if the user types then the list filters.

I am able to get the list to open when the user clicks the input field, however when I try to pre-populate a value using the inputValue prop, I can no longer do anything in the input field.

Any ideas/examples on how to achieve something like this?

[JofArnold]

Opinionated side-note: if you’re going controlled I recommend you only use onStateChange and completely take control of Downshift’s internal state. I’ve saved myself a lot of headaches this way. For instance, if you want to clear a selection you’ll need to clear all of selectedItem, inputValue, highlightedIndex or the next time you type Downshift may end up reverting to internal state for selectedItem and the result will be confusing.

[mshaw-nm]

Sure, I would have to clean up the example that I have since it was for a work project.