Creating new options with AsyncCreatable and Modal

I am attempting to use the AsyncCreatable component and would like to open up a modal when a user attempts to create a new option (to gather more information for the option).

I tried passing in onNewOptionClick to the component, but I am not seeing a way to add the new option after the user has finished with the modal.

I’m thinking perhaps onNewOptionClick can be passed in a callback function that adds the option once the function is ready.

Something like:

if (isOptionUnique) {
  const callback = (option) => {
    options.unshift(option);

    this.select.selectValue(option);
  };

  if (onNewOptionClick) {
    onNewOptionClick(option, callback);
  } else {
    callback(option);	
  }
}

Is there already a better/existing way to accomplish this?

Thanks

[nafg]

There’s a workaround described here that worked for me: http://www.shahqaan.com/blog/react-select/ Basically, skip onNewOptionClick – use onChange and detect whether it’s a “regular” option or the new option placeholder by testing what properties it has. For instance the placeholder option is given a className property. In my case, my options have a data property so I test if it’s not there instead.

[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 limited efforts to maintain the latest 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!