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?
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;
There is no
onKeyDownprops available inreact-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>
);
}
}