mui / mui/material-ui

[material-ui][TextField] When with minRows, it makes the height from small to final height

Open
#42,520 15 comments 1 reaction 1 assignee View on GitHub

@siriwatknp is already working on this.

Since Oct 28, 2025.

ready to take scope: text field type: bug
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

Steps to reproduce
  1. open https://stackblitz.com/edit/nextjs-ziwkdm?file=package.json
  2. click refresh multiple time

you will see the height of textarea change from:

image

to:

image
Current behavior

The height will change from a small height to the final height

Expected behavior

No height change, it will make web page cls metric bad

Context

fix the web page cls, you can see the prompt input box height change:

https://github.com/mui/material-ui/assets/41773861/b1b01e6f-ea0b-4015-b33b-c8540849d9ca

Your environment
npx @mui/envinfo
   System:
    OS: macOS 14.5
  Binaries:
    Node: 20.13.1 - ~/.local/state/fnm_multishells/51935_1717493153731/bin/node
    npm: 10.8.1 - ~/.local/state/fnm_multishells/51935_1717493153731/bin/npm
    pnpm: 9.1.0 - ~/.local/state/fnm_multishells/51935_1717493153731/bin/pnpm
  Browsers:
    Chrome: 125.0.6422.142
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled: ^11.11.5 => 11.11.5 
    @mui/material: ^5.15.19 => 5.15.19 
    @types/react: ^18 => 18.2.75 
    react: ^18 => 18.2.0 
    react-dom: ^18 => 18.2.0 
    typescript: ^5 => 5.4.5 

Search keywords: TextField, minRows, height

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.