Combo box can't add space in input

[aliakbarazizi]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.6.6

What browser are you using?

Chrome, Firefox

Reproduction URL

https://codesandbox.io/s/headlessui-react-combobox-autocomplete-example-v1-5-0-forked-mfv1km?file=%2Fsrc%2FApp.js

Describe your issue

When I try to type space in combobox its not working.

Just go to repo URL and try to type space in input.

[adamwathan]

Hey! This is because you've wrapped your Combobox.Input in a Combobox.Button and the space key is propagating up to the button and triggering a click. Don't put the input in the button, the input should be on it's own like in our docs:

    <Combobox value={selectedPerson} onChange={setSelectedPerson}>
      <Combobox.Input onChange={(event) => setQuery(event.target.value)} />
      <Combobox.Options>
        {filteredPeople.map((person) => (
          <Combobox.Option key={person} value={person}>
            {person}
          </Combobox.Option>
        ))}
      </Combobox.Options>
    </Combobox>

The Combobox.Button component is an optional component you can use to manually open/close the combobox, and should be separate from the input if used.

[aliakbarazizi]

Thanks, I see now, The reason I wrapped it in button is I want to open combobox when input is selected.
Now I just add as="div" in combobox.button and everything are good. thanks again

[wongfunian]

If you are using headless ui version 2, add as="div" might not able to solve the issue. you can try to add e.stopPropagation() to prevent Button behaviour.

<ComboboxInput
  onKeyDown={e => e.stopPropagation()}
/>