-
-
Couldn't load subscription status.
- Fork 32.7k
Description
Steps to reproduce
Steps:
- Open this link to live example: (required)
- See how endAdornment on renderInput TextField of the autocomplete is positioned at the carat, whereas on the TextField on its own it is vertically centered.
- Add or remove items from Autocompletes to see alignment being problematic.
Current behavior
Multiline TextFields normally have their endAdornments vertically centered (see the example): TextFields which are the renderInput of an Autocomplete are an outlier, with their adornments in an inconsistent place. How can I ensure consistency between endAdornments for both scenarios?
Expected behavior
Either the TextFields should have consistent endAdornment behavior, or we should be able to customize the behavior.
Context
Trying to vertically center a button on the right hand side of a multi line, multi select autocomplete
Your environment
npx @mui/envinfo
This is running in an Electron app.
System:
OS: Windows 11 10.0.26100
Binaries:
Node: 22.8.0 - C:\Program Files\nodejs\node.EXE
npm: 10.8.3 - C:\Program Files\nodejs\npm.CMD
pnpm: Not Found
Browsers:
Chrome: 141.0.7390.108
Edge: Chromium (140.0.3485.54)
npmPackages:
@emotion/react: 11.14.0 => 11.14.0
@emotion/styled: 11.14.1 => 11.14.1
@mui/core-downloads-tracker: 7.3.4
@mui/icons-material: 7.3.4 => 7.3.4
@mui/lab: 7.0.0 => 7.0.0
@mui/material: 7.3.4 => 7.3.4
@mui/private-theming: 7.3.3
@mui/styled-engine: 7.3.3
@mui/system: 7.3.3 => 7.3.3
@mui/types: 7.4.7
@mui/utils: 7.3.3
@mui/x-data-grid: 8.14.1
@mui/x-data-grid-pro: 8.14.1 => 8.14.1
@mui/x-internals: 8.14.0
@mui/x-license: 8.14.1 => 8.14.1
@mui/x-telemetry: 8.14.1
@mui/x-virtualizer: 0.2.4
@types/react: 19.2.2 => 19.2.2
react: 19.2.0 => 19.2.0
react-dom: 19.2.0 => 19.2.0
typescript: 5.9.3 => 5.9.3
Search keywords: autocomplete endAdornment inputAdornment adornment TextField
Order ID: 109405
Search keywords: