Disabled prop not working on Combobox.Input

[calthomson]

Hello! Looks like the disabled prop on Combobox.Input isn't actually disabling the input box.

Ex:

  <Combobox.Input
    onChange={(e) => {
        setQuery(e.target.value);
    }}
    displayValue={() => query}
    placeholder="Type to search"
    disabled={true}
  />

Expected: Should not be able to type into the input box.
Actual: I'm still able to type into the input box.

If I use dev tools to set disabled=true on the resulting input box that is rendered for Combobox.Input, it works, so it seems like the Combobox.Input is just not forwarding that prop correctly perhaps.

[RobinMalfait]

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

We consider the Combobox as one component, if you move the disabled state to the Combobox itself then it has the expected behaviour.

[smithbm2316]

Thanks for this @RobinMalfait. This is very much a situation of me not reading the docs properly on second look, but I do think that it would be nice to have a small example in the main docs for the Combobox for extra clarity. Perhaps it could go above or in the Disabling an option section. I didn't notice at first that it was possible to disable the whole Combobox until re-reading the Component API -> Combobox section for a second time (seems as though my eyes and my Cmd+F "Find in page" let me down on the first read-through). If you'd consider it, I'd be happy to open a PR with an example and description of how to disable the entire thing. I think it would be nice to just make that more clear in the docs! Otherwise, I can't thank you and the Tailwind Labs team enough for this, it's a delightful component to use 😄. The new updates on #1285 particularly have been so great for using this as a custom auto-complete solution with Remix!

[georgiantonov]

@calthomson if you need to disable the input element itself you could do something in those lines:

<Combobox.Input
onFocus={onInputFocus}
...
/>

And have an onInputFocus function such as:

const onInputFocus = (event) => {
if (someBooleanThatSaysTheInputShoudBeDisabled) {
event.target.value = '';
event.target.disabled = true;
}
}

The first time you open the combobox, the focus moves to the input element. This way your onInputFocus function will run, and you will be able to access the input element in "old-school javascript"-style, and add the disabled attribute to it.