Skip to content

Inconsistency between endAdornments on TextFields and endAdornments on TextFields which are renderInputs #47110

@wbosley

Description

@wbosley

Steps to reproduce

Steps:

  1. Open this link to live example: (required)
  2. 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.
  3. 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:

Metadata

Metadata

Assignees

Labels

scope: text fieldChanges related to the text field.status: waiting for maintainerThese issues haven't been looked at yet by a maintainer.support: pro standardSupport request from a Pro standard plan user. https://mui.com/legal/technical-support-sla.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions