React-select: Can't get the name of a newly created element

Viewed 75

I have implemented a dropdown menu with search and the possibility of creating an item:

        <Creatable
          cacheOptions
          options={interests}
          isMulti
          defaultOptions
          onInputChange={this.handleInterestsInputChange}
          onChange={this.onSelectedInterest}
        />

enter image description here
When a user selects an existing option (interest) or creates a new one, this gets triggered:

  onSelectedInterest(all_selected_interests, action_details) {
    const { action } = action_details;
    if (action == "select-option") {
      // Do something
    } else if (action == "create-option") {
      console.log(
        " ~ file: EditProfileInSettings.js ~ line 470 ~ EditProfileInSettings ~ onSelectedInterest ~ action_details",
        action_details
      );
      console.log(
        " ~ file: EditProfileInSettings.js ~ line 470 ~ EditProfileInSettings ~ onSelectedInterest ~ all_selected_interests",
        all_selected_interests
      );
    }
  }

The problem is when (action == "create-option"), I cannot retrieve the name of the newly created option. This is what gets logged:

~ file: EditProfileInSettings.js ~ line 470 ~ EditProfileInSettings ~ onSelectedInterest ~ action_details {action: "create-option", name: undefined}

~ file: EditProfileInSettings.js ~ line 470 ~ EditProfileInSettings ~ onSelectedInterest ~ all_selected_interests [{…}] 0: {label: "new_option_name", value: "new_option_name", isNew: true} length: 1 proto: Array(0)

It does get logged with all_selected_interests, but if there are other options, then it will be logged with them.
So in order to retrieve I will have to do it manually.

In the case of select-option, the select option gets logged in action_details. So I can retrieve it directly from there.

It's a bit strange that it's not the same for create-option.

0 Answers
Related