React-select: How to clear select input programatically while on focus?

[sAnti09]

I am trying to add new options as user types and each option is added when the user types a comma. I'm trying to clear the select input field but no matter what I try, it just won't. I have to click the field again before it disappears. I've tried the ff:

• stateManager.setState({inputValue: ''})
• manually changing the value of inputRef to empty string
• calling force update on stateManager.select

[AndrejGajdos]

+1

[slavaboiko]

+1

[Xartok]

To clear the input field you can return empty string in onInputChange prop.

<Select
    onInputChange={(newInputValue, inputMeta) => {
        if(newInputValue.includes(',')) {
            addNewOption(); // option is added when the user types a comma
            return '';
        }
       return newInputValue;
    } }
/>

[viv3kk]

its not working for me. my value is changed to null, undefined or even blank, the select component still has previous value.

[jcuffe]

@Xartok I came here looking for the addNewOption method, which doesn't seem to exist. Did you make it up for the purposes of your example, or is there a method exposed by the library that allows this?

[juweez]

Returning an empty string onInputChange is not working for me. It still has the previous value as @viv3kk mentioned. Is there any other suggestion we could try?

[Methuselah96]

Have you tried using the inputValue prop and making the input value fully controlled? You can receive updates to the input value from onInputChange and update the inputValue accordingly.

[Xartok]

@jcuffe It was made up for the purpose of the example.

[ebonow]

Greetings everyone,

The text input can be cleared by making this a controlled input and passing an empty string to the inputValue

Here is a codesandbox demonstrating this with the specification of a comma triggering the addition of a new option value.

There are likely other optimizations that could be made, but this should be sufficient to show the use-case is possible and how to proceed.

I will be closing this issue, but can reopen if there are related issues or concerns.