CODEWITHSUNDEEP
javascriptreactjsreact-select
Rahul Sahni
Rahul Sahni

Reputation: 109

React-Select Creatable hide only create new.. message

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.

Upvotes: 3

Views: 5697

Answers (1)

Laura
Laura

Reputation: 8640

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.

Upvotes: 7

Related Questions