Can I hide only create new option from the dropdown when using React-Select Creatable. I want to show other suggestion as usual and want to keep creatable functionality of creating new tag as well. Just dont want to show what user is typing in the dropdown menu.

Edit: Adding a example code for React-Select:

import React, { Component } from 'react';

import CreatableSelect from 'react-select/lib/Creatable';
const colourOptions = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]


export default class CreatableMulti extends Component<*, State> {
  handleChange = (newValue: any, actionMeta: any) => {
    console.group('Value Changed');
    console.log(newValue);
    console.log(`action: ${actionMeta.action}`);
    console.groupEnd();
  };

  formatCreate = (inputValue) => {
    return (<p> Add: {inputValue}</p>); 
  };

  render() {
    return (
      <CreatableSelect
        isMulti
        onChange={this.handleChange}
        options={colourOptions}
        formatCreateLabel={this.formatCreate}
        createOptionPosition={"first"}
      />
    );
  }
}

Also here is a sandbox link:

when you type I want it shows a Add: plus all other filtered suggestions. I want to remove add part from it keeping rest of the functionality.

Hope this will help now.

Can I hide only create new option from the dropdown when using React-Select Creatable. I want to show other suggestion as usual and want to keep creatable functionality of creating new tag as well. Just dont want to show what user is typing in the dropdown menu.

Edit: Adding a example code for React-Select:

import React, { Component } from 'react';

import CreatableSelect from 'react-select/lib/Creatable';
const colourOptions = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]


export default class CreatableMulti extends Component<*, State> {
  handleChange = (newValue: any, actionMeta: any) => {
    console.group('Value Changed');
    console.log(newValue);
    console.log(`action: ${actionMeta.action}`);
    console.groupEnd();
  };

  formatCreate = (inputValue) => {
    return (<p> Add: {inputValue}</p>); 
  };

  render() {
    return (
      <CreatableSelect
        isMulti
        onChange={this.handleChange}
        options={colourOptions}
        formatCreateLabel={this.formatCreate}
        createOptionPosition={"first"}
      />
    );
  }
}

Also here is a sandbox link: https://codesandbox.io/s/wqm0z1wlxl

when you type I want it shows a Add: plus all other filtered suggestions. I want to remove add part from it keeping rest of the functionality.

Hope this will help now.

• javascript
• reactjs
• react-select

• 1 Could you include the code you have written so far in your question? – Tholle Commented Aug 6, 2018 at 11:37
• Do you have any code – Paul McLoughlin Commented Aug 6, 2018 at 11:37
• Just to synthesize what you want if I understood it well, you want to have the Add: option without the word that the user is typing ? – Laura Commented Aug 9, 2018 at 4:00

1 Answer 1

If you want to replace the option Add: myValue you can use the props formatCreateLabel in your CreatableSelect as following:

formatCreateLabel={() => `Add`}

Here a live example with the previous code applied to the example you gave. You can consult the documentation right here to understand the behaviour of this particular props.