I'm using react select to render a select component:
const options = [...]
<Select
...
options={options}
/>
The problem is that I any value that I type that is not inside options won't get selected (when the select component is not focused the value will disappear).
Is there any way to make <Select/> more of a suggestions component that provides autocomplete for options but also allows any value to be entered?
You can use the creatable Component to achieve that:
Example from react-select
import React, { Component } from 'react';
import CreatableSelect from 'react-select/creatable';
import { colourOptions } from '../data';
export default class CreatableSingle extends Component<*, State> {
handleChange = (newValue: any, actionMeta: any) => {
console.group('Value Changed');
console.log(newValue);
console.log(`action: ${actionMeta.action}`);
console.groupEnd();
};
handleInputChange = (inputValue: any, actionMeta: any) => {
console.group('Input Changed');
console.log(inputValue);
console.log(`action: ${actionMeta.action}`);
console.groupEnd();
};
render() {
return (
<CreatableSelect
isClearable
onChange={this.handleChange}
onInputChange={this.handleInputChange}
options={colourOptions}
/>
);
}
}