mui / mui/material-ui

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

Open
#43,830 3 comments 1 reaction 1 assignee View on GitHub

Nobody has claimed this yet.

scope: autocomplete
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

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>
  1. 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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.