React-select: Unable to edit created entry using Select.AsyncCreatable

[prabhjot-bb]

Hi,

I'm facing the issue linked here. Once the entry is created, I want to be able to edit the same (probably create new entry).

https://stackoverflow.com/questions/44431224/react-select-how-to-edit-created-entries

[agirton]

Hi @prabhjot-bb we don't currently support editing a previously created item. Unless this is something that other users want, we can look at this after 1.0. You should be able do this on your end if you created your own value and option component.

[prabhjot-bb]

Hey @agirton, Thanks for the suggestion and considering it as a feature. Is there any jsfiddle/example for achieving this? I'm bit new to react js world.

[janusch]

@agirton thank you so much for maintaining this component.
Personally, I still haven't found a good replacement yet.

Could you go a bit more into detail or provide an example on how a custom value and option could solve this as a workaround? I thought the cursor is in another field than the input, how could this be achieved?

I would also really like to see this bug fixed. Would you consider adding it to the 1.0 release if there was a PR for this? cc. @bvaughn

[mmkari]

Hi @prabhjot-bb @janusch , I got this working like so:

Add a ref to your select component

<Select.AsyncCreatable
    ref={c => {
        selectComponent = c;
    }}
    value={values.selectedOption}
    onOpen={onOpen}
    ...
/>

then define your onOpen callback that takes your selected option and inserts the extracted label to the select component's state:

const onOpen = () => {
    if (values.selectedOption) {
        // method to use in version *v1.0.0-rc.5*
        selectComponent.select.handleInputChange({ target: { value: values.selectedOption.label } });
    }
};

[jai1331]

I really need this feature in my app, So I have started to do it on my own to edit the custom tags and somehow managed to get it.

This works for a single custom tag and I need this to work for all custom tags .But I'm struck when editing second custom tag, the input field shown in both custom tags.

Code is available here : https://stackblitz.com/edit/react-select-custom-tag-edit-new

Since many people like me need this feature, any suggestions on this will be helpful.

[paigeflourin]

i need this feature as well.

[cyberdude]

Is this still a thing?

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!