Auto select an option without users clicking from the dropdown

[shreya-stha]

Hello,

I am using the async component to load options from a remote source as the user types. How do I enable auto selection of an option if the query and the search result is an exact match, without having the user to manually select from the options.

The use case is when using a barcode scanner -- if there is an exact match, the field should be auto populated.

Any idea on implementing this is appreciated. Thanks so much in advance.

[manjushsh]

Hi @shreya-stha can you try this?
Code Sandbox

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

import AsyncSelect from "react-select/async";

class MyComponent extends React.Component {
  options = [
    { value: "Spring", label: "Spring" },
    { value: "Summer", label: "Summer" },
    { value: "Autumn", label: "Autumn" },
    { value: "Winter", label: "Winter" },
    { value: "Autumn2", label: "Autumn2" },
    { value: "Winter2", label: "Winter2" }
  ];

  state = {
    selectedOption: null
  };

  loadOptions = (inputValue) => {
    return new Promise((resolve, reject) => {
      // using setTimeout to emulate a call to server
      setTimeout(() => {
        const [exactMatch] = this.options.filter(
          (op) => op.label.toLowerCase() === inputValue?.toLowerCase()
        );
        if (exactMatch && this.options.includes(exactMatch)) {
          this.handleChange(exactMatch);
        }

        resolve(this.filter(inputValue));
      }, 2000);
    });
  };

  handleChange = (option) => this.setState({ selectedOption: option });

  filter = (inputValue) =>
    this.options.filter((option) =>
      option.label.toLowerCase().includes(inputValue.toLowerCase())
    );

  render() {
    return (
      <AsyncSelect
        value={this.state.selectedOption || null}
        defaultOptions
        cacheOptions
        loadOptions={this.loadOptions}
        onChange={this.handleChange}
      />
    );
  }
}

ReactDOM.render(<MyComponent />, document.getElementById("app"));