Autocomplete don't get disabled value from FormControl

[FlorianBurgevin]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Hello,

I'm trying to customize the Autocomplete component.

I want to use it with a FormControl as I use it with my other custom components.
The FormControl should control the "disabled" and "error" state of the input.

But, with the Autocomplete, the disable prop is not passed to the Autocomplete renderInput.

Here is an example : https://codesandbox.io/s/brave-bird-kv5jcc?file=/demo.tsx

As you can see in the console, the disable prop is equal to false, but true in the FormControl.

Current behavior 😯

With the Autocomplete, the disable prop is not passed to the Autocomplete renderInput.

Expected behavior 🤔

The FormControl should control the "disabled" state of the input.

Context 🔦

I want to customize the Autocomplete.
I already customized input

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[mnajdova]

Thanks for the feedback. I agree, it is surprising that the other input elements are compatible with the FormControl component, but the Autocomplete is not. We should fix this by using the useFormControl hook in the Autocomplete component too. @FlorianBurgevin would you be up to creating a pull request for this and pinging me for review?

[FlorianBurgevin]

Hi @mnajdova !

Pull Request is done !

[oliviertassinari]

The example in the codesandbox is:

<FormControl disabled={true}>
  <FormLabel>Custom autocomplete with Input</FormLabel>
  <Autocomplete
    disablePortal
    id="combo-box-demo"
    options={top100Films}
    sx={{ width: 300 }}
    renderInput={(params) => {
      console.log(params);
      return <Input {...params} />;
    }}
  />
</FormControl>

The disabled prop is not the only issue, there are many more:

• the listbox of the autocomplete doesn't link the label
• the label doesn't link the textbox
• the size isn't inherited from the FormControl
• the InputLabel is not used to inherit more states from the FormControl
• there are wrong props are spread to the DOM element
• wrong CSS spacing between elements

The best fix might be to add documentation on how to use Autocomplete when breaking down the TextField into sub-components. As far as I know, it needs to be:

<Autocomplete
  disabled={true}
  id="combo-box-demo"
  options={top100Films}
  sx={{ width: 300 }}
  renderInput={({ InputProps, inputProps, InputLabelProps, ...params}) => {
    return (
      <FormControl variant="standard" {...params}>
        <InputLabel {...InputLabelProps}>Custom autocomplete with Input</InputLabel>
        <Input {...InputProps} inputProps={inputProps} />
      </FormControl>
    );
  }}
/>

for the props propagation to be correct. The autocomplete needs to be rendered as a parent of the input elements for the wiring to be correct.

[FlorianBurgevin]

@oliviertassinari it's a bit confusing to use FormControl inside the Autocomplete no?

<FormControl>
  <FormLabel>Classic Input</FormLabel>
  <Input />
</FormControl>

The FormControl is a wrapper that should contain any type of field. And take care of the label and other stuff around a field.

So, i should be able to use an Autocomplete as a field inside my FormControl ?

<FormControl>
  <FormLabel>Autocomplete Input</FormLabel>
  <Autocomplete />
</FormControl>

[myYensid]

🙏 This is what I am looking for. Thanks oliviertassinari! 🙏

      <Autocomplete
        id="combo-box-demo"
        options={top100Films}
        sx={{ width: 300 }}
        renderInput={({
          InputProps,
          inputProps,
          InputLabelProps,
          ...params
        }) => {
          return (
            <FormControl variant="standard" {...params}>
              <FormLabel {...InputLabelProps}>Label Outside</FormLabel>
              <OutlinedInput {...InputProps} inputProps={inputProps} />
            </FormControl>
          );
        }}
      />