Combobox.Input component throw error if it's children is not a HTML input element

[frozenluo]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.7.8

What browser are you using?

Chrome

Reproduction URL

https://codesandbox.io/s/boring-lake-5vo97g?file=/src/App.tsx

Describe your issue

1. click the input element
2. type any characters
3. error happens: xx.setSelectionRange is not a function

Seem this issue was brought by #2153, for my project, there are several elements under Combobox.Input and the data.inputRef.current is not a valid HTML input.

Hopefully we could handle this case as well, thanks a lot.

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This is not the intended way of using the Combobox.Input. The as prop is exposed so that it is easier to use existing components you already have, for example:

<Combobox.Input as={MyStyledInput} />

Instead of trying to to making the Input a div to add a label, wrap the input itself with a div and a label: https://codesandbox.io/s/lingering-wildflower-oerdsz?file=/src/App.tsx

<Combobox>
  <label
    style={{
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      gap: 12
    }}
  >
    <span>Input label:</span>
    <Combobox.Input />
  </label>
</Combobox>

We also have a dedicated label component so that you don't have your wrap it and they will be linked correctly: https://headlessui.com/react/combobox#using-a-custom-label

Hope this helps!