Misunderstanding creatable / looking for callback on pick create value

[on3iro]

Hi,

We are currently trying to implement a select that allows to create a new item. Our createable function should eventually open a dialog to create a new element (we have multiple fields, that need to be provided).

TL;DR: To rephrase: we don't actually need an option that immediately creates a value, but one, that triggers a callback which eventually allows to add a new option which is then fed back into our controlled select) - is there a way to achieve that? 🙂

For now we simply tried to add a creatable function like this, to achieve the most basic functionality:

...
createable: (value) => {
     console.log({ value })
     return value
} ,

However we noticed, that the function is being called on every input event. I would expect it to only populate the create-option and allow me to select it, to create a new option. (opening the aforementioned dialog in our case).

What would be the correct way to go about this?

I noticed in your source code, that the creatable function basically is just a means to decide how the value is calculated, but when is the value actually created? It looks like its just appended to the available options. Is there currently no way to achieve, what we need?

Thanks in advance

[on3iro]

Nevermind, we misunderstood the behavior of the select. For everyone wondering the same thing, here is how you would go about this:

Considering you have a controlled select, you basically have two kinds of Select-Options:

type SelectOption =
     | { type: 'existing'; label: string; value: YourThing } 
     | { type: 'new'; label: string }

Now your createable-function has to return an option of the second type. That way you can decide how to react to the selected option inside your onChange-handler.