ComboBox should let user use search query as input

[zhuhaow]

One useful scenario for ComboBox is to use for search queries, where user will see query suggestions, but user doesn't have to choose from the suggestions.

However, my test suggests ComboBox requires the user to select from the dropdown list otherwise the onChange won't be triggered when the user presses enter. Maybe there is something I'm missing or this case is not supported yet.

Any help would be appreciated.

[lordvcs]

I am interested in this too. If this component is truly meant as an autocomplete component the user should be able to enter query that may not show up in the autocomplete suggestions dropdown.

[RobinMalfait]

Hey! Thank you for your suggestion!
Much appreciated! 🙏

I'm not 100% sure what you mean. But is your goal to allow to let's say create a new record (based on the query) if it doesn't exist in a certain list?

Is this what you mean? https://codesandbox.io/s/condescending-grass-konu6w?file=/src/App.js

[zhuhaow]

Thanks for the quick reply.

Sorry I didn't put this clearly.

The current behavior of ComboBox is, if user input something that doesn't match a record and press enter, it will select the previously selected item. This behavior will not work for cases where we want to use ComboBox as a search input with query suggestions such as Google search.

[lordvcs]

@RobinMalfait A good example would be the google search, the google search input shows all the suggested items in the dropdown, u can either choose a suggested dropdown item or use ur own input by pressing enter.

[kristiandupont]

I am interested in this as well. Basically a high-fidelity version of <input type="search" />. It looks like react-aria has something, so I will try that out: https://react-spectrum.adobe.com/react-aria/useSearchField.html

[ragulka]

I can get behind this, as well. I would be great if we can use ComboBox to simply show suggestions. The user would be free to use them or ignore them altogether. I understand there are use-cases for both scenarios (ie, sometimes you want to force the user to make a selection).

[ragulka]

See https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html Example 1: List Autocomplete with Manual Selection. No requirement to select anything, not resetting the input value when user does not make a selection.

[mathijsfr]

Link doesn't work anymore

[ragulka]

Looks like W3 have update these examples. Please see the following ones:

• https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-autocomplete-list.html
• https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-autocomplete-both.html

[stephent]

@RobinMalfait is it the case that https://headlessui.dev/react/combobox#allowing-custom-values should already do what is demonstrated by https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-autocomplete-list.html ? (I'm struggling to get the example to work.)

[ragulka]

@RobinMalfait I'd like to circle back to this. ARIA guidelines describe the different implementations of a combobox:

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

Admittedly, https://headlessui.dev/vue/combobox#allowing-custom-values does allow using a custom value, but the implementation is rather restrictive. It does not allow the user to ignore the custom option. The user must make a choice to either select the custom option or discard their input. This is not how the ARIA combobox examples are implemented.

See the Editable Combobox With List Autocomplete Example:

1. Type a custom value in the field, such as Something
2. Note that there are no suggestions displayed
3. Move focus away from the field
4. Note that the combobox still shows Something as the value (it does not reset to an empty string or predefined suggestion)

In Headless UI combobox, this is not possible. We always need to show a custom option with the custom value the user typed in. And, if the user does not explicitly select the custom option, the combobox value will reset to what it was previously.

[haykkh]

I implemented this by having an invisible "insert custom value" <ComboboxOption> and being picky about what value I emit up

<script setup lang="ts">
const query = ref('')

// this can't return null because we need headlessui to pick always see it
const customValue = computed(() => (query.value === '' ? {} : { id: null, name: query.value }))

const updateValue = (value) => {
  // if the user has typed in a custom value always prioritize that, otherwise take what headlessui gives you
  emit('update:modelValue', customValue.value?.name ? customValue.value : value)

  // reset query.value for future interactions
  query.value = ''
}
</script>

<template>
  <Combobox :model-value="modelValue" @update:model-value="updateValue">
  ...

  <ComboboxOptions>
    <ComboboxOption :value="customValue" class="h-0 w-0 overflow-hidden"></ComboboxOption>
    ...
  </ComboboxOptions>

  ...
</template>

[designbyadrian]

I agree with @ragulka

To make Combobox have universal use, it should at least feature:

• free text input that does not clear on blur
• a clear entry button like input[type=search]
• an event that fires when user hits enter in the input box

Much like react-aria as demonstrated here:

https://codesandbox.io/s/hardcore-moon-xzc4r?file=/src/Popover.tsx

[mdashfaque-mamdu-au17]

@RobinMalfait is there any workaround for this one. any ideas on how we can achieve this using headlessui

[RobinMalfait]

Hey! Here is an example on how you can achieve something like this: https://headlessui.com/react/combobox#allowing-custom-values

[ragulka]

@RobinMalfait that example is nothing like me and others are advocating for here. Please see my original comment from January 10th with the WAI ARIA example.

[RobinMalfait]

I see what you mean, sorry I wasn't clear.

What I meant was that we currently don't support exactly what you want, but there is a workaround that gets you close to the functionality where you can allow any value instead of choosing from a pre-defined list. It's true that this will require you to add a "create " like option, and if you don't want that behaviour then that's something we unfortunately don't support right now.

I can't promise an ETA for when and even if we will add the other "mode" where you don't have to choose from a predefined list of options in the Combobox.

[ragulka]

I understand this hasn't been on the horizon. However, would you consider a PR that at least showcases this mode in ComboBox - even if at a very basic level? I can hack together a working solution, but it will probably not be at the level of abstraction or sophistication that I see in this library.

Basically, if there is a community effort to add this "mode", would you be able to guide or flesh out the details that the community may not be aware of?

[pixelmultiplo]

Whoa this is a pretty big lack. Material UI has the freeSolo attribute to solve it in 2 seconds.

[pixelmultiplo]

So the Combobox cannot be used for an Autocomplete. What should i use?

[TuanPhamHP]

a bit tricky but you can custom the @after-leave (in case you using Vue) event.

<TransitionRoot
         ...some-config-here
	@after-leave="handleAfterLeave"
>

and this is the custom function:

handleAfterLeave() {
	  if (this.canBeCustomValue && this.query) {
		  const rs = {
			  id: this.query,
			  name: this.query,
		  };
		  this.customData.push(rs);
		  this.selectedData = rs.id;
	  }
	  this.query = '';
	},

so, i'm just create new props 'canBeCustomValue' to enable this behavior, when you 'leave' (blur...) the will create new option and select this as well. And yes, its not a good solution like 'MUI', hope that headlessui team can publish an update about things like this.