[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}
            </>
          ),
        },
      }}
    />
  )}
/>