How to recognize typed text?

[Dronom]

Is there any way to recognize the input text when no options are found? I need a default onChange function, not when selection an option.

[manjushsh]

Hi @Dronom, You can get user inputted value using onInputChange

Example Code Sandbox: https://codesandbox.io/s/react-select-examples-6picqk?file=/src/get-input-val.tsx

[Dronom]

Hi @manjushsh Thank you for example. it demonstrates that it is possible to recognize the user's entered data. But I still have a question - is it possible to see the found items or their absence at the moment of this event? I need to understand what the user entered when no options were found.
Thank you in advance for your reply.

[romanh24]

I'm also interested in this solution 👀

[manjushsh]

Hi @Dronom / @Roman-H91, If you want to get value of user input when no options found, see this example

Here we disable default filter and write our filter logic on user changes input, so we can check if options array is empty or not.

Code:

import Select, { createFilter } from "react-select";
import { useState } from "react";
import "./styles.css";

const filterOption = createFilter({});

const allOptions = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" }
];
const otherOption = {
  value: "other",
  label: "Other"
};

export default function App() {
  const [options, setOptions] = useState(allOptions);

  const filterAllOptions = (rawInput: string) => {
    const filteredOptions = allOptions.filter((o) => filterOption(o, rawInput));
    if (filteredOptions.length === 0) {
      filteredOptions.push(otherOption);
      window.alert(`No options detected. Input: ${rawInput}`);
    }
    setOptions(filteredOptions);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Select
        options={options}
        filterOption={() => true}
        onInputChange={(e) => filterAllOptions(e)}
      />
    </div>
  );
}

Reference link