Add onBlurResetsInput prop

[slybridges]

Add an onBlurResetsInput prop that, if set to false, would keep user input in search box on onBlur.
Defaults to true.
Fixes #588

[slybridges]

@JedWatson - anything you'd need from me to get this merged ?

[CodeWiesel]

I would love this feature as well

Anytime soon we can expect this?

[alurim]

+1 this would be great to have

[JedWatson]

Thanks for the bump - sorry I left it so long! and thanks for the PR @slybridges :)

[fhelwanger]

Great!

Sorry to ask this... but do you know when this will be available on npm? We really need this feature to our app.

[JedWatson]

In about 15 minutes.

[fhelwanger]

Thanks! I'll update our project.

We're using a custom build until now :)

[frodrigueza]

Is this available on npm? We need this feature a lot! Thanks!

[JedWatson]

@frodrigueza it's been available since version 1.0.0-beta9 :)

[frodrigueza]

Ok, thanks @JedWatson .

@tomascharad
@javiersubiabre

[samism]

Hello, I see

"onBlurResetsInput / onCloseResetsInput / onSelectResetsInput REMOVED now that inputValue can be controlled, these should be unnecessary"

Can someone provide an example of how to achieve the equivalent effect of onBlurResetsInput using inputValue? Thank you.

Edit: Found it: https://react-select.com/advanced#controlled-props

[gitowiec]

I wonder why this works wrong. If I connect inputValue with my state (React.useState) React-Select should leave the input value without change if onBlur happens. One should be able to manage if he wants to clear unknown option of AsyncCreatable when blur happens. What do you think @JedWatson ?

[Shreyam-Saha]

@samism Hey what about if I am using a functional Component ? How can I write the onInputChange method ?

[ebonow]

Greetings
https://codesandbox.io/s/react-select-editable-and-selectable-6nfdv

@Shreyam-Saha
This example should show you how to use the onBlur functionality with a custom component. In this example, I'm using a custom Input to keep it rendered visibly instead of hiding it.

@gitowiec
If you want to leave the input then you can follow my code example and change this:

    // onBlur => setInputValue to last selected value
    if (action === "input-blur") {
      setInputValue(value ? value.label : "");
    }

    // onInputChange => update inputValue
    else if (action === "input-change") {
      setInputValue(inputValue);
    }

to this:

    // onBlur => keep input value
    if ((action === "input-blur") || (action === "input-change")) {
      setInputValue(inputValue);
    }```

[Shreyam-Saha]

@ebonow This does not solve the issue. The text typed in the field goes away once I click away, I want it to stay

[Methuselah96]

@Shreyam-Saha What issue are you trying to solve? This PR is about making the text go away when you click away, which is why that's the assumption of the issue you're trying to solve.

The CodeSandbox provided shows you how to write an onInputChange method using a functional Component as requested. If you don't want the text to go away, just remove these lines in the onInputChange method:

    // onBlur => setInputValue to last selected value
    if (action === "input-blur") {
      setInputValue(value ? value.label : "");
    }

Finally, it would be appreciated if you don't down-vote people who are trying to help you. While @ebonow might not have answered the question the way you wanted him to, he has taken the time (out of his free time) to try to help you out. If someone responds to you and they didn't answer your question, it's better to just clarify your question, thank them for you helping you, and not down-vote them.

[Shreyam-Saha]

@Methuselah96 really sorry if I sounded rude.
@ebonow Appreciate the help though