[Combobox] custom value submission

[rmillio]

🙋 Feature Request

Hello React Spectrum,

I've recently worked with Spectrum Combobox and tried to implement a way to allow users to submit their own custom values to the items list. First I created an "artificial" option named "Create custom option <your_option_here>" which the user can select and then it gets added to the list of available items. I wrote a code sample here so that you can better understand the context. The main takeaway from this code sample is:

• the user can select the artificial option and the option gets submitted to the list - this behaviour works well
• onSelectionChange is not called when pressing enter to submit a custom value if the user had not selected the artificial option from the dropdown
• onKeyDown is called when pressing enter, but there is no reliable way to detect if the event is triggered by the selection of an item, or by the user who pressed enter to submit his/her value after typing.

In my use-case, it is quite common that the user will want to submit a custom value, and the user would like to not have to manually select the artificial option in order to submit a custom value to the form state.

🤔 Expected Behavior

The user would like to type a value and then press enter to submit it to the options list and have it selected, without having to use the mouse or keyboard to select the artificial option from the list.

😯 Current Behavior

In the current behavior of Combobox, in order to submit a custom value to the options list, the user has to select (by mouse or keyboard) the artificial option which will be handled in the onSelectionChange handler.

💁 Possible Solution

Idea 1. Google Chrome URL search-bar auto-selects the first option from the dropdown when typing. This would satisfy the requirement, as the user can type and press Enter to select the first option (which is the artificial option) to create the custom value and submit it to the options list.

This idea has been dismissed on grounds of accessibility NVDA announcement issues.

Idea 2. Combobox could have a way to support this feature if there existed some kind of submit handler prop. Or maybe if the onKeyDown received an augmented event which would describe whether the event was triggered by the selection of an item in the dropdown with keyboard, or by pressing Enter after typing (with no option selected from the dropdown), although this seems a bit hack-ish.

🔦 Context

I received a Jira ticket to solve this and I couldn't find a reliable way to implement it. We consider this feature a nice-to-have and I think it might be a useful thing for many Combobox users. From personal experience, after typing something in a combobox (or other similar use-case components), as a user, I expect to press enter and submit the input value, without manually selecting an artificial option.

If needed, I can provide more context about my specific use-case, although I don't believe it is useful for this issue.

I also started a thread in Slack Spectrum group chat where @LFDanLu, @reidbarber and I discussed this, but I'm not sure if I can paste the link here. I can forward that thread privately for those who need more context.

💻 Examples

CodeSandbox - https://codesandbox.io/s/combobox-customvalues-k10w82

🧢 Your Company/Team

Product - Customer Journey Analytics
Team - Bucharest UI (artistic name ~ Explorers)

Thank you for your time and effort, React Spectrum team!

[LFDanLu]

Talked with the team today about this, here is our proposed plan of action:

1. We'd like to reinvestigate the "autofocus the first option" behavior and see if we can get a workaround working for NVDA bug.
2. Separately, we'd like to support something like the idea 2, aka add support for onSubmit like we already have in useSearchAutocomplete. onSubmit would ideally fire when the user hits Enter with a item in the dropdown focused (assuming it is a new selection from what was previously selected) or presses a item, returning the key of the selected item. If the user hits enter without a item focused in the dropdown, onSubmit would fire with the text set in the ComboBox input.
   Code change for handling custom value submit would likely be in useComboBox and mimic the logic in useSearchAutocomplete whereas handling onSubmit for a item selected from the menu would be handled in onSelectionChange in useComboBoxState if a key has been selected, similar to how it is done in SearchAutoComplete

Happy to take contributions for the onSubmit, the team will be tackling the "autofocus the first option" investigation.