CODEWITHSUNDEEP
javascriptnode.jsreactjsreact-select
Raf Dor
Raf Dor

Reputation: 145

onChange react-select multiple options

I need to detect if I tipe into a searchable react-select. According to the official documentation first of all I have to pass isMulti prop in order to select more than an option.

The actual built-in onChange detects changes only when I select an option, and not when I type into the box. I need it because I have to call an API if I type into that input box.

Here is My select:

  <Select
    options={myOptions}
    isMulti
    loadingIndicator={true}
    styles={selectStyle}
    onChange={(e) => console.log(`e`, e)}
  />

Actually onChange logs me an array with the options selected. How can I change that for example if I type "fo" then I have "fo"? Is there any option or way to do so?

Upvotes: 2

Views: 10985

Answers (2)

Muhammad Shariq
Muhammad Shariq

Reputation: 164

Yes, we have async select option to load data from API when user type. Below I have attached the code for you documented in their official website. https://react-select.com/home#async

import { useState } from "react";
import AsyncSelect from "react-select/async";

const colourOptions = [
  { label: "Oranage", value: "orange" },
  { label: "Yellow", value: "yellow" },
  { label: "Blue", value: "blue" }
];

const SelectOption = () => {
  const [inputValue, setInputValue] = useState("");

  const filterColors = (inputValue) => {
    return colourOptions.filter((i) =>
      i.label.toLowerCase().includes(inputValue.toLowerCase())
    );
  };

  const promiseOptions = (inputValue, callback) => {
    setTimeout(() => {
      callback(filterColors(inputValue));
    }, 1000);
  };

  const handleChange = (newValue) => {
    const inputValue = newValue.replace(/\W/g, "");
    setInputValue(inputValue);
    return inputValue;
  };

  return (
    <AsyncSelect
      cacheOptions
      defaultOptions
      loadOptions={promiseOptions}
      onInputChange={handleChange}
    />
  );
};

export default SelectOption;

Upvotes: 1

Rashed Rahat
Rashed Rahat

Reputation: 2475

There is no onKeyDown props available in react-select's documentation.

What you can do is something like below:

class App extends Component {

  onKeyUp = () => {
    console.log("I see");
    // Your rest code
  };

  render() {
    return (
      <div onKeyUp={this.onKeyUp} className="App">
          <Select
          options={myOptions}
          isMulti
          loadingIndicator={true}
          styles={selectStyle}
          onChange={(e) => console.log(`e`, e)}
          />
      </div>
    );
  }
}

Upvotes: 0

Related Questions