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}
/>

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.