How to make onSelectResetsInput example works with non-multi react select?

[MohammedSaberMohammed]

Hello everyone,
I'm using the onSelectResetsInput=false from **Advanced guide **

current behavior:

• It works fine with multi select
• But if you commented isMulti prop ----> then select a value the input will be empty and the menu remains open
• Note that: **this is because the input ---> acually not empty ( try to delete with the backspace ) and the value already choosed ** but somehow the input is empty

Desired Behavior:

• when i select i should be able to see selected value and input should holds it's value
• overall i need to see the selected value

Thanks in Advance

[ebonow]

Greetings @MohammedSaberMohammed ,

In the following Discussion thread #4341 highlighting previous codesandbox examples developed for the community, you will find an example which allows a user to retain the inputValue.

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

Please note the behavior is designed to clear out input when the input is blurred.

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

If you would like to retain whatever text was entered, you can replace the empty string assignment with inputValue

I hope this is helpful and let me know if you have questions about the implementation or modifications.

[MohammedSaberMohammed]

@ebonow Thank you it works fine but when i applied the solution here
onSelectResetsInput

1. The menu doesn't close after selection.
2. The options filtered by the input value try to choose an option then open the menu again

Steps for Wanted Behavior

1. enter y in the search field in the attached example ----> it will show 2 options [ 'y', 'yellow' ]
2. choose any option ----> the option list will be overridden by the selected option ------> options list should be the same i guess and only the selected option should be highlighted
3. the menu doesn't close after selection

is it possible to achieve that ?

[ebonow]

There is code which is preventing the menu from closing if there is an inputValue, however your implementation by design is of course to retain the inputValue in the input when a selection is made. Likely you want to allow the menu to close if there is no input OR if the inputValue matches the selected option label.

Try this...

      case "menu-close":
        console.log(this.state.inputValue);
        const allowClosed =
          !inputValue || (inputValue && option && option.label === inputValue);
        this.setState({
          menuIsOpen: !allowClosed ? true : undefined
        });
        return;

demo: codesandbox

[ebonow]

@MohammedSaberMohammed just wanted to follow up to ensure this resolved your use-case. Can you confirm this fits what you are looking for and if so, mark this as answered?

[MohammedSaberMohammed]

@ebonow Thank you it worked. and you can mark it as closed