How to prevent User from creating duplicate values using React-Select Creatable?

Question

I am using react-select' Creatable to make a dropdown and allow user to create new item to the list.

This is what I have:

<Creatable
  name="form-field-name"
  value={this.props.selectWorker}
  options={this.props.selectWorkers}
  onChange={this.props.handleSelectWorker}
/>

Right now user can create new name even though it already exist, creating duplicates like shown below.

I saw that there is an option called isOptionUnique on react-select site.

Searches for any matching option within the set of options. This function prevents duplicate options from being created. By default this is a basic, case-sensitive comparison of label and value. Expected signature: ({ option: Object, options: Array, labelKey: string, valueKey: string }): boolean

I have not been able to use it. I have tried isOptionUnique=true, isOptionUnique={options:this.props.workers}, but I got Creatable.js:173 Uncaught TypeError: isOptionUnique is not a function error.

I can't find an example for isOptionUnique, what is the best way to filter react-select to prevent duplicates using Creatable?

Shanimal · Accepted Answer · 2017-07-25 00:39:51Z

2

It's expecting a function

isOptionUnique(prop) {
  const { option, options, valueKey, labelKey } = prop;
  return !options.find(opt => option[valueKey] === opt[valueKey])
}

Don't forget to add it to your component instance

isOptionUnique={this.isOptionUnique}

edited Jul 25, 2017 at 0:39

answered Jul 25, 2017 at 0:21

Shanimal

11.8k7 gold badges67 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

zaplec Over a year ago

Is this case sensitive? The creatable ignoreCase option does not seem to work, so I'm wondering, if I could prevent duplicates with differing cases with this.

Shanimal Over a year ago

Im not sure if this helps, but ignoreCase defaults to true which should ignore case by default when filtering the results. (So 'true' is the same as 'TruE' by default) Also if you have filterOption(s) set it will override ignoreCase. At least that's what the docs on github say. github.com/JedWatson/react-select

Shanimal Over a year ago

oh but, yes, this is definitely case sensitive. The comparison is done and returns a boolean, so you could modify it easily. It would probably do as you said, and Im just guessing there would be no side effects.

Ianoti · Accepted Answer · 2019-01-22 15:40:30Z

2

This can also be achieved using the isValidNewOption prop.

isValidNewOption = (inputValue, selectValue, selectOptions) => {
    if (
      inputValue.trim().length === 0 ||
      selectOptions.find(option => option.email === inputValue)
    ) {
      return false;
    }
    return true;
  }

you define a function taking three parameter of the inputValue you typed in, the selectValue if a value is selected and the existing options as selectOptions. The function should return true or false dependent on what conditions you want a new option to be valid. this will prevent addition of duplicates.

In the case above we prevent adding of new options if there is no text or if the email already exists in the available options

answered Jan 22, 2019 at 15:40

Ianoti

211 bronze badge

2 Comments

nojitsi Over a year ago

Adds new option even though method return false.

nojitsi Over a year ago

This method will prevent the option "Create abcd..." from appearing in the select list. If the false option is not shown.

Collectives™ on Stack Overflow

How to prevent User from creating duplicate values using React-Select Creatable?

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related