[Autocomplete] dropdown/popper fails to render when wrapped with a ThemeProvider setting default input slotProps on TextField.

[brandong954]

Steps to reproduce

Steps:

1. Wrap Autocomplete with a ThemeProvider with the following theme defined:

let theme = createTheme({
  components: {
    MuiTextField: {
      defaultProps: {
        slotProps: {
          input: {
            sx: {
              margin: "10px",
            },
          }
        },
      },
    },
  },
});

<ThemeProvider theme={theme}>
  <Autocomplete
    disablePortal
    options={['hello']}
    renderInput={(params) => (
      <TextField
        {...params}
        label="type something"
      />
    )}
  />
</ThemeProvider>

2. Click on the input for Autocomplete and no dropdown/popper is displayed with the provided options.

Current behavior

No dropdown/popper is displayed with the provided options. No runtime errors are incurred either.

Expected behavior

Able to style Autocomplete TextField input at the theme level without negatively affecting its popper/dropdown from displaying.

Context

I want the Autocomplete TextField input to be styled like every other TextField input within my application by using a given ThemeProvider to do so.

A similar issue was also encountered with DatePicker.

Your environment

npx @mui/envinfo

  System:
    OS: Linux 5.15 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
  Binaries:
    Node: 22.9.0 - /usr/local/bin/node
    npm: 10.8.3 - /usr/local/bin/npm
    pnpm: Not Found
  Browsers:
    Microsoft Edge
      Version 129.0.2792.52 (Official build) (arm64)
    Google Chrome
      Version 128.0.6613.139 (Official Build) (arm64)
  npmPackages:
    @emotion/react: ^11.13.0 => 11.13.3
    @emotion/styled: ^11.13.0 => 11.13.0
    @mui/core-downloads-tracker:  6.1.1
    @mui/icons-material: ^6.1.1 => 6.1.1
    @mui/material: ^6.1.1 => 6.1.1
    @mui/private-theming:  6.1.1
    @mui/styled-engine:  6.1.1
    @mui/system:  6.1.1
    @mui/types:  7.2.17
    @mui/utils:  6.1.1
    @mui/x-date-pickers: ^7.18.0 => 7.18.0
    @mui/x-internals:  7.18.0
    @types/react:  18.3.8
    react: ^18.3.1 => 18.3.1
    react-dom: ^18.3.1 => 18.3.1

Search keywords: Autocomplete popper ThemeProvider theme input slotProps

[sai6855]

looks like this is related to #43573

I've tried running your code from #43606 sandbox, looks like it is working.

https://codesandbox.io/embed/4lm8px?module=/src/Demo.tsx

[brandong954]

I was able to get things working by using styleOverrides instead of defaultProps; however, it seems like both should be valid.

[croraf]

I had the same issue recently just that I didn't provide slotProps through the Theme but directly on the <TextField> element, and the autocomplete missbehaved and also crashed, with an error like Autocomplete expects input to be present.

@mj12albert
My conclusion is that the problem occurs because the params passed to renderInput contain inputProps and InputProps (which are actually obsolete) and if you also provide slotProps these conflict each other. (also provided InputLabelProps needs to be considered when fixing).