React-select: Async Select does reset input onBlur

[sarveshascbe]

Async Select 2.0 resets input onBlur. We have a case where user types in value for filtering options, as when user searches we fetch options from backend service. Now when user stops typing and moves mouse cursor away, which triggers onBlur event. Eventually it clears the typed in value and resets to empty, and closes the options dropdown.

This behavior should be controlled. There should be a prop like OnBlurResetsInput set to true or false like in earlier version so that we can control not to reset input onBlur.

If there is a way to control this behavior in async select 2.0 ? If so i tried all possible options by googling , none of it works.

Could someone please help as soon as possible to fix this issue.

[jwilander]

This is a problem for me as well.

[osricwong]

I also get this issue, do you have any solutions to fix it?

[sizovilya]

+1
How to get controlled async select ? I want to store options in redux and pass options to component via props. Is it possible now ?

[avmak]

Same problem. Please help with this!

[ebonow]

Greetings,

Yes you can use a controlled input with an AsyncSelect.

The premise is that you set the inputValue in state and any input changes get updated in state, gets passed to the select as a prop. This way you can also watch for changes in the blur as well and override the input reset.

Demo: codesandbox

``` js
// Save your input
const [inputValue, setInputValue] = useState("");

// On input change or blur, update state
const onInputChange = (textInput, x) => {
if (x.action === "input-blur" || x.action === "input-change") {
setInputValue(textInput);
}
};

// onChange set inputValue to label of selected option
const onChange = (option) => {
setInputValue(option.label);
};

return (
inputValue={inputValue}
onInputChange={onInputChange}
onChange={onChange}
closeMenuOnSelect={false}
{...otherProps}
/>
```

If you have any further feedback or thoughts about the behavior, please feel free to use the discussion as the default resetInputOnBlur is somewhat controversial and we are open to feedback from the community, but as it stands, it is the existing implementation and the action meta api does allow users the ability to override this with a controlled input.

I will be closing this as resolved, but if you have any other questions or issues with the solution provided, please feel free to reply and I will be happy to work through the concerns and reopen this if necessary.