Creatable Item in Auto-Complete Component

[wcastand]

Feature request 🚀

Add a Creatable component to the auto-complete to be able to add the option to create an item if the search is empty. Right now it requires to handle everything ourselves and creates conflict between handlers.

It would allow us to do more like deleting the selected value when triggering the creatable because adding an option in the onSearch creates a false value to be selected.

The current example below show how i'm doing it right now but with the flaws, i talked about above.

Expected:

• Adding an item when the search is empty to create a new item.

Examples:

// handlers
  const searchHandler = (currentValue: string) => {
    if (!currentValue) return setOptions([])
    const relatedOptions = clientsOptions.filter((item) =>
      item.value.split(/\s/gim).some((v) => v.startsWith(currentValue)),
    )
    setCurrentSearch(currentValue)
    setOptions([
      ...relatedOptions,
      { label: 'Créer un nouveau client...', value: 'create-option' },
    ])
  }

  const handleChange = (newValue: any) => {
    if (newValue === 'create-option') {
      // new client
      const [lastname, ...firstname] = currentSearch.split(/\s/gim).reverse()
    }
    console.group('Value Changed')
    console.log(newValue)
    console.groupEnd()
  }

// component
    <AutoComplete
        clearable
        options={options}
        onSelect={handleChange}
        placeholder="Rechercher ou créer un client..."
        onSearch={searchHandler}
        style={{ minWidth: 420 }}
      >
        <AutoComplete.Empty>
          <span>Pas de client trouvé...</span>
        </AutoComplete.Empty>
      </AutoComplete>

Programme:

Others:

[unix]

Do you mean similar to the way Material UI works?
At present it seems that you need to implement this function manually. This feature is good, but it's not necessary, if more user request this feature, I'll list it in Roadmap.

If anyone else wants to get this feature, please leave a message here.

[wcastand]

not sure about material UI but something like what react-select does here

The auto-complete of zeit-ui could almost replace react-select in most cases except this one which is too bad since we are losing the design if I use react-select just for this.

[wcastand]

Since it's not something you will prioritize, would it be okay for me to contribute by building it.

Was thinking of something like Autocomplete.Creatable like the Empty that would add an option at the end of the list or when the list is empty that would fire an event like onCreate with the curent value of the input and will clean the input and close the list once clicked for example.

It would allow to avoid using react-select and be able to use zeit-ui with the coherent design so might as well try to contribute and make it available to everyone if i'm building something like this :)

[unix]

The Creatable requires support of at least 2 functions, otherwise it is of little significance:

1. Only Option value are allowed. When the input value does not match Option value, remove input value and go back the last value. Without this function, the default input value is equal to the creation value.
2. Multiple value support and removable.

Once Creatbale function needs to be added, the above two features are also necessary. Add these features may requires us to rewrite the AutoComplete component, what do you think of this? @wcastand

[wcastand]

I'm not sure i understand the first one.
For the second one, could it be that if multiple is active we don't reset the input value?

Not sure if it's good or bad but could we go incrementally and add the support for creatable and in the doc explaining that we don't support multiple on creatable and later add the support for it if it's required or asked by the community?

[unix]

Well, I thought for a while, maybe I can add this feature to AutoComplete. (I have some plans for improvement) I will create a PR for preview in recent days.

[unix]

Here are some new implementations #255 , @wcastand can the new example solve your problem?

[wcastand]

I don't really understand what do you mean by free solo but the example "Add an entry to be selected for any value." looks like want i want.

but i really don't get the disableFreeSolo

[unix]

For add "something", there are two scenarions:

1. The value of Option is a supplement to Input:

At this scenario, Option and Input provide different values.

2. Option value is excatly equal to the current Input value:

At this scenario, if free input is not disabled, the Option will have no meaning. Because the actual value doesn't change, Option functions more like value formatting.

Refer to free solo of material-ui for this.