Feature request: Editable MultiValues

[rlucha]

Allow edition of a MultiValueLabel by double clicking on its name. Sometimes our users would like to change just a typo when entering a new value in a multi CreatableSelect and find themselves having to delete the whole thing and start again.

It has been requested from our users that those values should be editable and not just clearable. Search is a core feature of our product and it is used extensively, minor improvements like this make a difference.

This is how gmail does it:

This has been requested in the past (#1558, #4009, #2296) and the proposal from the react-select team has been to create custom components that provide the feature. User have done so here and here with varying degrees of success.

While this can be done with custom components as proposed , it has also been requested for this to be part of the core set of features instead, so I'd like to refresh this to see if there has been a change of mind about integrating this on the core, for example with an isEditable property on the CreatableSelect.

To sum it up, are editable MultiValues on the roadmap now? if not, would a PR providing such a feature be accepted?

I could work on it.

[ebonow]

@rlucha

For starters, this sounds like a great UX. Part of me wonders if this isn't a larger request of enabling the editing text of selected values across SingleValues (though the work required would be entirely differently).

Perhaps an easier path to helping the community would be seeing if we can get a clean working example and having it added to the Experimental section of the site. My understanding is that there is an overhaul in process (legacy React methods and removing Flow) so bigger features such as this might add more complexity to that effort.

Would you be interested in creating a Sandbox and seeing if we can append to that section? If we had both the Single and Multi version, it could make a case for an editableInput prop for the next major version of react-select

[rlucha]

Sure, I will work on it. Thank you.

[ebonow]

@rlucha

Thank you. I think it'd be a big help and it looks like the first code sandbox you shared had a pretty good start. I suspect there might be some considerations needed. A few I can think of:

• Editing the multi-value to a textInput that doesn't exist (and the select isn't createable)
  -- I'd imagine the expected behavior is to revert back to original multi value label selection

• Editing the multi value selection to a textInput that doesn't exist, and is createable
  -- This seems straight forward though, as a developer, how do I manage the menu as the options thus far to my experience for createableSelects are additive meaning the onCreateOption would be where I do something like

const FAVORITE_LETTER_OPTIONS = [{ label: 'A', value: 'a' } , { label: 'B', value: 'b' }]; 
const [ options, setOptions ] = useState([...FAVORITE_LETTER_OPTIONS])
const onCreateOption = option => setOptions([...options, option])

return <CreateableSelect options={options} onCreateOption={onCreateOption} />

I imagine in this case, when done editing, it would need to fire BOTH a 'remove-item' and EITHER 'select-value' or 'create-item' (depending on whether the new input matches with a new item or existing one). This makes it possible so that the onChange function can accurately update the menu options.

Just might be good to show how it could be used as such.

[ebonow]

Again, I think adding a few experimental examples might help alleviate a lot of the common issues people have using the component or maybe even manage to start a sticky thread people can go to and contribute.

As a placeholder for such a thing, I'd likely add this sandbox example to demonstrate text editing of a SingleValue.

Likewise, I would love some help in getting rid of the CSS file used to keep opacity of the input set to 1 without creating a custom component, but as it is written, the Select input focus logic overwrites the opacity of the styles Input component.

[rlucha]

Yes, I remember needing to do some hacky stuff with display and opacity in the input to avoid weird states showing. I don't have any allocated time at the moment to work in this within the company but I'll try to get something going on my limited personal time. Thank you.

[ebonow]

Greetings @rlucha ,

I came across this implementation from #3204 and thought to share it with you. I'll be taking a deeper look into this, but given that we have a created implementation of this, I will close out this issue for now and hoping to better encapsulate it to make it easier for others to use in their implementations.