I'm using react select to render a select ponent:

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 ponent is not focused the value will disappear).

Is there any way to make <Select/> more of a suggestions ponent that provides autoplete for options but also allows any value to be entered?

I'm using react select to render a select ponent:

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 ponent is not focused the value will disappear).

Is there any way to make <Select/> more of a suggestions ponent that provides autoplete for options but also allows any value to be entered?

• javascript
• reactjs
• react-select

1 Answer 1

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}
      />
    );
  }
}