Is it possible to both select and create the same value in react-select?

Question

I'm trying to have a multi Creatable in which the user can both select a preset value, and "create" the same value by himself, both in the same interaction. For example, my render look

import CreatableSelect from 'react-select/creatable';
function test(){
    render(
        <CreatableSelect
            isMulti
            onChange={this.handleChange}
            options = [{ value: 'Blue', label: 'Blue'}, { value: 'Red', label: 'Red'}]
          />
        );)
}

I want to let the user both choose 'Blue' as an option, and create the value 'Blue' as well. Namely, I want to output of handleChange to be:

[{ value: 'Blue', label: 'Blue'}, { value: 'Blue', label: 'Blue', __isNew__: true}]

It's not a UI problem for me, as I'm coloring selected values differently based on whether it was created or selected from the list. Is it possible? I tried having isValidNewOption={() => true} as a prop, but it didn't work.

This is pretty vague. More details of how exactly you're working with this data are going to help here. How does the user select and defining at the same time? Do you mean something like an editable drop-down menu / list? How are you consuming this data? What does the code look like? — squillman
I edited my question. Just to make sure- I'm asking specifically about CreatableSelect of 'react-select'. — Ofrine
I'm confused. Curious why would you even want that. As far as I know, the behaviour of react-select filters the existing options to find 'Blue' preventing it from being also created. Can you elaborate on the exact use case of why this is important in the UI? — Squiggs.
do you mean, user can create new value if it's not present in current options? — Nonik
@Squiggs. I'll admit, my use case might be a little bit of a niche. I let my (very limited group of) users generate an "ID" of some sort. This "ID" is constructed from a closed list of existing values, related to another concept in my system, and from custom user-additions. So, an example might be: "Blue"-Blue-Red-"hello", where "Blue" and "hello" are user additions, and Blue and Red exists beforehand. The meaning of "Blue" and Blue is different for me, and my users are well aware of this. — Ofrine

Ofrine Ofrine · Accepted Answer · 2020-12-10T22:42:02

Found a workaround, which I would not prefer to use if there's a better way:

I can add a special character (or a string) as a prefix to all values (leaving the labels aas is). For example- transforming [{ value: 'Blue', label: 'Blue'}, { value: 'Red', label: 'Red'}] into [{ value: '$Blue', label: 'Blue'}, { value: '$Red', label: 'Red'}]

Now, it lets my create a new value "Blue", and selecting the value "$Blue". As the label of "$Blue" is still "Blue", the user won't notice the difference. Lastly, I need to remove the prefix in my onChange function.

It's not a very elegant solution, but better than nothing.

Is it possible to both select and create the same value in react-select?

1 Answers