[material-ui][Autocomplete] Passing slotProps to the TextField in renderInput throws an error

[ClementDreptin]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-1qmjam?file=Demo.tsx

Steps:

1. Click in the Autocomplete to see the error

Current behavior

I found 2 strange behaviors

• When passing { htmlInput: { ... } } more padding is added and clicking in the input throws an error.
• When passing { input: { ... } } the endAdornment disappears and clicking in input doesn't open the list of options.

Expected behavior

I expect to be able to use slotProps.input the same way I was using InputProps and slotProps.htmlInput the same way I was using inputProps.

Context

In our app we have an Autocomplete with a custom endAdornment. We are adding another adornment before the existing one to be exact. I was trying to migrate from InputProps and inputProps to slotProps since they became deprecated in MUI v6.

Before migrating the code looked like this (which is still working in v6 but won't in v7):

<Autocomplete
  ...
  renderInput={(params) => (
    <TextField
      {...params}
      InputProps={{
        endAdornment: (
          <>
            <MyCustomIcon />
            {params.InputProps?.endAdornment}
          </>
        ),
      }}
    />
  )}
/>

After the migration the code looks like this:

<Autocomplete
  renderInput={(params) => (
    <TextField
      {...params}
      slotProps={{
        input: {
          endAdornment: (
            <>
              <MyCustomIcon />
              {params.InputProps?.endAdornment}
            </>
          ),
        },
      }}
    />
  )}
/>

Both adornments disappeared and the list of options isn't displaying on focus anymore.

Your environment

npx @mui/envinfo

  System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
  Binaries:
    Node: 20.17.0 - ~/.volta/tools/image/node/20.17.0/bin/node
    npm: 10.8.2 - ~/.volta/tools/image/node/20.17.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 128.0.6613.113
  npmPackages:
    @emotion/react: 11.13.3 => 11.13.3 
    @emotion/styled: 11.13.0 => 11.13.0 
    @mui/core-downloads-tracker:  6.0.1 
    @mui/icons-material: 6.0.1 => 6.0.1 
    @mui/material: 6.0.1 => 6.0.1 
    @mui/material-nextjs: ^6.0.0 => 6.0.1 
    @mui/private-theming:  6.0.1 
    @mui/styled-engine:  6.0.1 
    @mui/system:  6.0.1 
    @mui/types:  7.2.16 
    @mui/utils:  6.0.1 
    @types/react: ^18.3.3 => 18.3.5 
    react: 18.3.1 => 18.3.1 
    react-dom: 18.3.1 => 18.3.1 
    typescript: ^5.4.5 => 5.5.4 

Search keywords: Autocomplete slotProps

[sai6855]

@DiegoAndai do you think this issue should be added to Material-UI v6 issues board?

Cc @aarongarciah

[aarongarciah]

@sai6855 I just added it to the v6 issues board.

[mjkstudios]

@ClementDreptin - I am definitely experiencing some odd behaviors since upgrading to v6. In general, I feel like what is being passed as params from the Autocomplete component needs to be updated to reflect the v6 changes with regards to slotProps.

However, I've had some luck by spreading the params.InputProps as follows:

<Autocomplete
  renderInput={(params) => (
    <TextField
      {...params}
      slotProps={{
        input: {
          ...params.InputProps, // <-- ADD THIS LINE
          endAdornment: (
            <>
              <MyCustomIcon />
              {params.InputProps?.endAdornment}
            </>
          ),
        },
      }}
    />
  )}
/>

[jonesmac]

for what its worth, this seems to fail on all TextField input adornment props. Autocomplete uses TextField so that's why there's an issue here.

See the problem here - https://codesandbox.io/p/sandbox/broken-text-field-adornment-8zhlqc?file=%2Fsrc%2FApp.tsx%3A53%2C72&workspaceId=bdebcbbe-982a-40d5-9c2e-b543cf24c982

[MonstraG]

I had same problem with autocomplete throwing, and @mjkstudios solution worked.

DatePickers also broke silently, and were also fixed by the same change, I think they also pass old InputProps/inputProps and need to be updated to slots

[DiegoAndai]

Hey everyone, sorry for the late reply.

About the bug

It's important to note that when overriding InputProps or slotProps.input for the Autocomplete's TextField, params.InputProps must be spread. This is true in v5 as well as v6, here are the examples:

• v5: https://codesandbox.io/p/sandbox/issue-43573-v5-examples-n8vhg5
• v6: https://codesandbox.io/p/sandbox/issue-43573-v6-examples-44yc7t

So the issues should be fixed by correctly spreading params.InputProps (or params.inputProps when using inputProps or slotProps.htmlInput)

About slots pattern consistency

I agree that "Autocomplete component needs to be updated to reflect the v6 changes with regards to slotProps", as mentioned above. This should be possible:

<Autocomplete
  disablePortal
  options={options}
  sx={{ width: 300 }}
  renderInput={(params) => (
    <TextField
      {...params}
      label="Correct override slotProps"
      placeholder="Correct override slotProps"
      slotProps={{
        ...params.slotProps,
        input: {
          ...params.slotProps.input,
          endAdornment: (
            <>
              <div>icon</div>
              {params.slotProps?.input?.endAdornment}
            </>
          ),
        },
      }}
    />
  )}
/>

Which is currently not the case.

Summary

I don't think there's a bug besides the consistency issue. If you can confirm that the bug you're experiencing is fixed by spreading params.InputProps (or params.inputProps), then we can move forward with making the slotProps usage consistent, as mentioned above.

Please confirm if this fixes the issue, or correct me if I'm wrong or missed something in my demos.

[ClementDreptin]

@DiegoAndai I confirm that spreading params.InputProps in slotProps.input or params.inputProps in slotProps.htmlInput fixes the error being thrown, the actual issue is just the slots pattern inconsistency.

Thank you for pointing the missing spreads in the original examples, I don't know how we never ran into any issues in our app.

[aarongarciah]

Closing since it's not a bug and we already have an issue to standardize the slots API across components: #41281