React-select: Inconsistent behavior with closeMenuOnSelect property when using Async

[lekhasy]

Are you asking a question?

No, I have make a question on Stack Overflow, but now i think it is an issue.
https://stackoverflow.com/questions/52243760/retain-input-value-on-option-selected-in-react-select

Are you reporting a bug or runtime error?

Yes, I have created a demo for demonstrating this issue:
https://codesandbox.io/s/345rp0m041

Reproduce steps:

1. type "a" and select one value
   Expected behavior: since the input value isn't changed, the user should be able to select another option.
   Real behavior: the menu list show no option.

1. Enable this line to see it work as expected:
   //import Select from "react-select";

So, I think we might have a inconsistent behavior between select and async component.

[dhfuzari]

Any news on this subject?

[rheydt]

Seeing the same thing. Unclear whether closeMenuOnSelect is intended to work with Async, but it does seem useful. Perhaps even more useful for Async when isMulti is used.

Use case: A user types into the input, sees 2 options they want to select, selects one of them... and then the input clears, and they have to type the same search term again to be able to select the second option.

Regardless of whether the dropdown stays open after select, it's not useful unless you have the ability to persist options after selection (perhaps have an option not to clear the input value until the component is blurred?)

[rovolution]

would be great to get a PR around this!

[ruben0626]

Any news ?

[selena-mallet]

I'm facing this issue too, any news about it ? thanks

[selena-mallet]

I could solve this issue by:
-> put the fetch result in the state
-> inject it as defaultProps
-> set closeMenuOnSelect to false

here is a portion of code inside the component

const FormAsyncSelect = ({ asyncSearchUrl, ...otherProps }) => {

  const [fetchedOptions, setFetchedOptions] = useState();

  const loadOptions = (inputVal) => {

    return /* fetch request */
      .then((res) => {
        setFetchedOptions(res.data);
        return res.data;
      })
      .catch((error) => {
    ...
      });
  };

  return (
    <AsyncSelect
      loadOptions={loadOptions}
      closeMenuOnSelect={false}
      defaultOptions={fetchedOptions}
      {...otherProps}
    />
  );

[Methuselah96]

I've started a fork of react-select. Feel free to resubmit this issue on the fork and/or submit a PR to resolve this issue on the fork and we can get it merged and released.

EDIT: :tada: I've archived the fork now that we've got some momentum in this repo and Jed is involved again. Sorry for the disturbance!

[yashjais18]

Any update on this issue?

[ebonow]

Greetings @lekhasy and @yashjais18 ,

First of all, I know this issue is 2 years old, so it's possible this is no longer an issue but given the recent interest, it appears others are running into the same use case.

Regarding the implementation here, AsyncSelect calls loadOptions onKeyDown input so keeping the inputValue in state unfortunately wouldn't impact the results returned. If you want to preserve the options, you'd need to cache them in the defaultOptions as @selena-mallet suggested

I assume this is maybe what was intended which is why the example provided included an options prop with the Async.

In any case, after

1. Adding the defaultOptions to state and passing it through the defaultOptions prop in the AsyncSelect
2. Setting the state for defaultOptions in the resultProvider when the results are returned
3. Resetting the defaultOptions in the default case of the inputHandler method

...it appears to be working as expected.

Working demo: codesandbox

class demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchKey: "",
      defaultOptions: []
    };

    this.loadOptions = this.resultProvider.bind(this);
    this.onInputChange = this.handleInputChanged.bind(this);
  }

  handleInputChanged(input, reason) {
    if (reason.action === "set-value") {
      return;
    }

    this.setState({
      ...this.state,
      defaultOptions: [],
      searchKey: input
    });
  }

  resultProvider(searchKey) {
    const setOptions = (defaultOptions) => this.setState({ defaultOptions });

    return new Promise((resolve) => {
      setTimeout(() => {
        setOptions(options);
        resolve(options);
      }, 1000);
    });
  }

  render() {
    return (
      <Select
        closeMenuOnSelect={false}
        blurInputOnSelect={false}
        isMulti
        loadOptions={this.loadOptions}
        defaultOptions={this.state.defaultOptions}
        inputValue={this.state.searchKey}
        onInputChange={this.onInputChange}
      />
    );
  }
}

This appears to be resolved, so I will close this, but if you have any questions or concerns, this can be reopened if necessary.
Thank you for the patience and happy to discuss more if needed.