Add support for editable combobox

[ragulka]

WAI ARIA guidelines have an example of editable combobox with list autocomplete. There's some previous discussion around a similar approach in #1228. I thought I'd start a discussion around possible implementation and acceptance criteria.

The guidelines state:

In some implementations, the popup presents allowed values, while in other implementations, the popup presents suggested values, and users may either select one of the suggestions or type a value.

When examining the linked example, we can observe the following:

1. User can type in the input field and have suggestions show up
2. User can select one of the suggestions, or type a value
3. If user has typed in a value that has no matching suggestions (or if they do not select or highlight one), and they press Enter, Esc, or move focus outside the field (either by clicking outside or tabbing away), the input retains the typed value.

HeadlessUI combobox currently has no support for the behavior in step 3. It always resets the value to previous selection. This is basically the same as the Select-only combobox in ARIA example.

I believe both select-only and editable comboboxes have valid use-cases.

Differences compared to "allowing custom values"

While HeadlessUI already supports custom values by adding a "new option", it's not equivalent of the editable combobox example, because:

1. The "add new option" is always visible. This can be annoying and confusing in certain scenarios: if user types a custom value and selects the "add new" option, then realizes they made a typo, and start typing again, the "add new option" pops up again.
2. If the combobox is meant to serve as giving hints or suggestions to the user (not a list of allowed values), then forcing the user to make a selection is poor user experience

Possible implementation

In order to make combobox editable, the following would have to be true:

• First option should not be active by default. I've implemented a configurable version of this for the Vue package in my fork
• When user types, the results (suggestions) are filtered as always
• When user highlights a suggestion via keyboard and presses Esc or clicks outside the dropdown:
  • The dropdown should close, but the typed value should remain in the input (and an update:modelValue event should be emitted with the input value)
• When user types, but there are no suggestions:
  • If the combobox loses focus (either via click outside, tabbing, etc) or will press Enter: the typed value should remain in the input (and an update:modelValue event should be emitted with the input value).

All of the above behavior should be relatively straightforward to implement, given there would a prop, for example editable that can control this.

What do you think? I'd be happy to contribute a PR at least for the Vue package (I'm not familiar with React).