onSubmit with Combobox.Input

[arlyon]

Hi! I have a form (as part of a search) for which there is a general purpose search bar, which also triggers a dropdown for autocomplete of predefined tags. I was happy to see that Combobox does most of the work! 🚀

However, I would like to be able to still use the component predictably in the form, which means triggering the submit when the enter key is pressed (and not currently selecting an item), but the combobox stops propagation unfortunately. Can we support this usecase? Happy to write a PR for it if given the greenlight :) The thought would be to have the event only be stopped if there is a currently selected item.

For context I am using the combobox with a custom component that works with react-hook-form, and not providing the value prop to Combobox, so the selected value is not actually displayed in the Input.

const form = useForm();
const [chosen, setChosen] = useState([]);
const results = tags.filter(tag => tag.label.startsWith(form.watch("search"))); // suggest tags that match 

return (<Combobox
  as="div"
  tw="relative"
  onChange={(id) => setChosen([...chosen, id])}
>
  {({ open }) => (
    <>
      <Combobox.Input
        as={InputText} // a light wrapper around <input /> that works with react-hook-form
        label="Search"
        autoComplete="off"
        register={form.register}
        name="search" // the name of the field in the form data to update
      />
      <Transition
        show={open}
        enter={tw`transition duration-75 ease-out`}
        enterFrom={tw`transform scale-95 opacity-0`}
        enterTo={tw`transform scale-100 opacity-100`}
        leave={tw`transition duration-75 ease-out`}
        leaveFrom={tw`transform scale-100 opacity-100`}
        leaveTo={tw`transform scale-95 opacity-0`}
      >
        <Combobox.Options tw="absolute mt-2 w-full rounded-md border-2 border-primary-500 bg-white p-2 shadow-lg">
          {results.map(({ label, type }, index) => (
            <Combobox.Option as={Fragment} key={index} value={index}>
              {({ active }) => (
                <li
                  css={active ? tw`bg-neutral-100` : null}
                  tw=" flex cursor-pointer flex-row items-center justify-between rounded-sm p-2"
                >
                  {label}
                </li>
              )}
            </Combobox.Option>
          ))}
        </Combobox.Options>
      </Transition>
    </>
  )}
</Combobox>)

Above is some basic code to illustrate the point. We have a general purpose search input box, but when you type, tags are suggested. Selecting a tag will add it to the list, while pressing enter should still submit the form. I can expand it into a proper codepen if you'd like more info.

Required changes have been put in a PR here for illustration purposes: #1176

Cheers,

Alex

[AndresPonciano]

Having the same issue here

[jamesthomsondev]

I also ran into this issue today, I found that onKeyDown swallowed the event, so I ended up using onKeyUp instead. Still not entirely ideal as I don't think libs should swallow events, but at least I was able to work around it.

[pieperz]

Running into this issue as well.

I'm using the combobox to create an Autocomplete search box. So when a user hits enter on the Input it navigates them to my search page. But if they key down to an option and hit enter it should go to the options search value.

The onKeyUp workaround is decent enough for now but would love to see a bit more of the inner workings exposed.

[tacomanator]

Worth noting: The onKeyUp workaround is no good for Japanese/Chinese input.

In these languages the enter key is also used for selecting characters—called 'composing'. Normally one can use onCompositionStart/onCompositionEnd to determine in what mode enter was pressed. However, the onCompositionEnd event is also not propagating, and when onKeyUp is triggered the native event isComposing property is always false.

[nilansaha]

Hi @arlyon did you finally find a way to make the combobox work with react-hook-form? I am stuck on it for a while now and I would really appreciate any help. I just posted on StackOverflow as well if thats more useful for giving context.

[arlyon]

I wrote a patch for an older version but in the end just stopped using headless ui

[bradleyhodges]

This seems to have been resolved in ^1.7.14. The onKeyDown hoos is working in my application:

onKeyDown={(event) => {
    // Listen for enter key
    if (event.keyCode === 13) {
        // Prevent submission
        event.preventDefault();
    }
}}