React-select: Dont't clear Input on onBlur

[slybridges]

I noticed that when Select is blurred, the onBlur event clears the input text field: https://github.com/JedWatson/react-select/blob/master/src/Select.js#L215

How can I disable this behaviour and keep whatever the user has started typing ?

[JedWatson]

I'm open to adding an onBlurResetsInput prop (default true) that prevents this behaviour... PR welcome, as I'm travelling for the next week, otherwise I'll get to it when I'm back.

[slybridges]

Hi @JedWatson, thanks, I've created the PR as suggested.
Let me know any comment.

And great job on react-select by the way! (should have started with this, how rude of me)

[Kola-Kola]

Any update in v3 ?

[gitowiec]

@JedWatson How to not clear the input value on blur?

[alita-moore]

@gitowiec:

Here's a solution that worked for me
I tried the above solutions but they weren't ideal for me, so I added a bit of extra logic here(has implementation example)

const App = () => {
    const [input, setInput] = useState("");
    const [inputSave, setSave] = useState("");

    return (
        <Select
            placeholder={inputSave} // when blurred & value == "" this shows
            value="" // always show placeholder
            inputValue={input} // allows you continue where you left off
            onInputChange={setInput} // allows for actually typing
            onMenuClose={() => setSave(input)} // before the input is cleared, save its value here
            onFocus={() => {
                            setInput(inputSave); // keeps the input
                            setSave(""); // prevents undesired placeholder value
                        }} 
                        blurInputOnSelect  // actually allows for ^^ to work
        />
    )
}

This keeps the search on select, meaning that when you type input, select, the select bar will keep a placeholder of the input and then when you click on it again it will continue where you left off -- you can see an example here