[Autocomplete] Ability to add an Add button with multiple + freeSolo

[andreasheim]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

I would like to either

• optionally include an Add or + button when multiple & freeSolo are enabled
• or be able to trigger onChange & clear the input from a separate button

On a separate note, it'd be nice to optionally being able to show the up/down chevron when freeSolo is on.

Examples 🌈

I'm replacing existing autocomplete components in our app that use outdated technology

Motivation 🔦

We have users who do not understand that you can add multiple values into an <Autocomplete> by hitting enter

When entering a value not in the list of options, there's no indication that this an input that allows you to enter multiple values, as the dropdown is closed.

I was able to get this partially to work.

• I can use onChange on the TextInput to get the current input value
• I can call onChange on a prop with the value added (e.g. props.onChange(props.value.concat(inputValue))

However then I'm not able to clear the input value.

I might be missing something obvious that's already in place.

Thank you, love what you're doing

[oliviertassinari]

Would this proposal fix the issue? #18113 (comment)

[oliviertassinari]

@andreasheim Random question, is this deployed in moz.com? We have a paid subscription to ahrefs.com, but maybe there is a chance we can get a free moz.com account and transition? 😁

[andreasheim]

@oliviertassinari Yes, that proposal would enable me to create the functionality I'm seeking.

Also yes, I'm working on using this in moz.com. I forwarded this.

[oliviertassinari]

@andreasheim Awesome, let's make the input value controllable then :) (thanks for forwarding).

[jonahcarneskog]

Wouldn't it be so much better to use the "noOptionsText"?
Adding a Add there shows a stylable add-button when there are no options.
The only issue is that the noOptionsText closes when the button is clicked. A "keep open" prop would be awesome.