Autocomplete component breaks when slotProps are provided for textfield override in theme

[yogeshkrishnani-alation]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/vitejs-vite-6rklm8?file=src%2FApp.jsx

Steps:

1. Create a theme and modify the MuiTextField default props

const theme = createTheme({
  components: {
    MuiTextField: {
      defaultProps: {
        slotProps: {
          input: {
            disableUnderline: true,
          },
        },
        variant: 'outlined',
      },
    },
  },
});

2. Create an autocomplete component and wrap it inside the created theme

<ThemeProvider theme={theme}>
  <div>
    <Autocomplete
      disablePortal={true}
      options={[
        { label: 'The Shawshank Redemption', year: 1994 },
        { label: 'The Godfather', year: 1972 },
        { label: 'The Godfather: Part II', year: 1974 },
        { label: 'The Dark Knight', year: 2008 },
        { label: '12 Angry Men', year: 1957 },
        { label: "Schindler's List", year: 1993 },
        { label: 'Pulp Fiction', year: 1994 },
      ]}
      renderInput={(params) => <TextField {...params} label="Movie" />}
      sx={{ width: 300 }}
    />
  </div>
</ThemeProvider>

Current behavior

Autocomplete component is not working

Expected behavior

Autocomplete component should work as expected

Context

If we replace slotProps with InputProps, autocomplete is working as expected. However, that's not ideal, as InputProps is deprecated and will be removed in v7.

Your environment

npx @mui/envinfo

``` System: OS: Linux 5.0 undefined Binaries: Node: 18.20.3 - /usr/local/bin/node npm: 10.2.3 - /usr/local/bin/npm pnpm: 8.15.6 - /usr/local/bin/pnpm Browsers: Chrome: 130.0.6723.59 npmPackages: @emotion/react: ^11.13.3 => 11.13.3 @emotion/styled: ^11.13.0 => 11.13.0 @mui/core-downloads-tracker: 6.1.5 @mui/material: ^6.1.5 => 6.1.5 @mui/private-theming: 6.1.5 @mui/styled-engine: 6.1.5 @mui/system: 6.1.5 @mui/types: 7.2.18 @mui/utils: 6.1.5 @types/react: ^18.3.11 => 18.3.11 react: ^18.3.1 => 18.3.1 react-dom: ^18.3.1 => 18.3.1 ```

Search keywords: autocomplete, slotProps, textfield, override, theme

[mj12albert]

@yogeshkrishnani-alation disableUnderline is only for the 'filled' variant of TextField, not 'outlined' This theme should work:

const theme = createTheme({
  palette: {
    primary: {
      main: purple[500],
    },
    secondary: {
      main: green[500],
    },
  },
  components: {
    MuiTextField: {
      defaultProps: {
        disableUnderline: true,
        variant: 'filled',
      },
    },
  },
});

Here's a working sandbox: https://stackblitz.com/edit/vitejs-vite-fygb6l?file=src%2FApp.jsx

[mj12albert]

Duplicate of https://github.com/mui/material-ui/issues/44145

[yogeshkrishnani-alation]

@mj12albert Thanks for the quick response! I understand now that disableUnderline is only applicable to the 'filled' variant and not 'outlined'. However, I noticed in the example you provided that you didn’t use slotProps to pass disableUnderline. Is there a particular reason for this approach?

When I try to pass disableUnderline through slotProps, the Autocomplete component still breaks. I've shared a sandbox link here for reference: https://stackblitz.com/edit/vitejs-vite-6rklm8?file=src%2FApp.jsx.

Previously, we used InputProps to pass disableUnderline, but during the MUI upgrade from v5 to v6, it was replaced by slotProps.input. The issue I’m facing is that when the Autocomplete breaks, there’s no MUI-specific error or stack trace to indicate why it’s failing. This makes it hard to troubleshoot the issue, especially if it’s related to using disableUnderline with an incompatible variant.

Do you think there’s room for improvement in how MUI handles overrides or provides error feedback in cases like this?

[mj12albert]

you didn’t use slotProps to pass disableUnderline. Is there a particular reason for this approach?

@yogeshkrishnani-alation It's not supported yet 😓 see https://github.com/mui/material-ui/pull/43606

[yogeshkrishnani-alation]

@mj12albert I would describe it as being supported since it's part of the official documentation and the mui version upgrade/migration script, but not fully functional due to some existing open issues like https://github.com/mui/material-ui/pull/43606.