Is Combobox Form Submit possible?

[gregrafferty]

Hi.

I'm trying to find a way to use a Combobox inside a search form. The idea is that as the text input value is entered then suggestions come back from an API but if the user doesn't select a suggestion hitting enter should trigger a form submit so we can use that value instead.

The issue I have is that there doesn't seem to be away to detect a form submit event from within the Combobox. On desktop we have the option of detecting keyup and checking for the 'Enter' key but this creates a different issue if you've selected a suggestion with the keyboard. Android in Chrome doesn't detect keyup events so that's not an option on mobile. My potential solution in this situation was to wrap the 'Checkbox.Input' in a form element and catch the on submit event but this does not seem to trigger.

Am I missing something that would allow this? If not would it be possible to add an option where the onSubmit event doesn't get blocked if they user hasn't made any keyboard selections?

I had a little look at the code in the repo and I suspect the 'Enter' keydown event may be preventing form submission form triggering.

headlessui/packages/@headlessui-react/src/components/combobox/combobox.tsx

Lines 661 to 676 in 591b328

	case Keys.Enter:
	if (state.comboboxState !== ComboboxStates.Open) return
	event.preventDefault()
	event.stopPropagation()
	if (data.activeOptionIndex === null) {
	actions.closeCombobox()
	return
	}
	actions.selectActiveOption()
	if (data.mode === ValueMode.Single) {
	actions.closeCombobox()
	}
	break

Thanks

[RobinMalfait]

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

We did a lot of improvements and fixes, for example in the Combobox there will always be an active option when the Combobox is open. When the Combobox is closed, then pressing enter allows you to submit a form. You can also provide a name prop to the component which gives you native form compatibility.

Here is an interactive example: https://headlessui-react-eqob3t5b8-tailwindlabs.vercel.app/combinations/form
Here is the code for it:

headlessui/packages/playground-react/pages/combinations/form.tsx

Lines 252 to 259 in 591b328

	<Combobox
	name="location"
	value={activeLocation}
	onChange={(location) => {
	setActiveLocation(location)
	setQuery('')
	}}
	>

You can install the insiders version to try it all out.

Hope this helps!

[gregrafferty]

Thank you for your reply. I've tried the latest insider version and have found a solution using that. I'll keep a lookout for when the next version drops. Cheers 😊