[TextareaAutosize] Adds new row for long placeholder if `nowrap` is applied
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 45/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- javascript, react
- Domain
- frontend
Research direction
Start with the linked StackBlitz reproduction and inspect TextareaAutosize's height-measurement behavior when a multiline OutlinedInput uses a long placeholder with nowrap. Confirm the height change as the preview width clips the placeholder. Done means the placeholder no longer causes an extra row while normal textarea sizing remains correct.
Written by the indexing model from the issue text.
Description
Steps to reproduce
Steps:
- https://stackblitz.com/edit/dnwvfvkr-xgcxabqs
- Drag the preview window slider to adjust its width until it just starts to clip the placeholder
- Notice the input height changes just as the end of the placeholder starts to clip outside the text area.
- In devtools, we can the see the height is manually set on the text input itself
Current behavior
https://github.com/user-attachments/assets/4db19b14-9136-4ec5-9c42-fb7a6c3637f3
Expected behavior
(this was faked by just setting maxRows to 1)
https://github.com/user-attachments/assets/58a188f2-94dd-4f73-a59e-a7697da834cb
Context
I have a placeholder inside a multiline OutlinedInput that on certain screen sizes and configurations is slightly too large and ends up wrapping onto a new line. I wanted to remove the wrapping from the placeholder, but the measuring done by MUI causes the input to grow in height regardless.
Your environment
No response
Search keywords: input height incorrect, multiline incorrect height
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from mui/material-ui
-
type: new feature waiting for 👍
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
mui/material-ui#48254 · 3 comments · 1 reaction ·
-
has workaround scope: avatar waiting for 👍
Difficulty 2/5 1-3 hours Newbie friendliness 64/100
mui/material-ui#48190 · 5 comments ·
-
has workaround scope: typography type: new feature waiting for 👍
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
mui/material-ui#46488 · 2 comments · 1 reaction ·
-
has workaround scope: text field type: bug
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
mui/material-ui#37216 · 6 comments ·
-
docs scope: autocomplete
Difficulty 1/5 1-3 hours Newbie friendliness 68/100
mui/material-ui#35713 · 5 comments ·
Similar issues
-
code-quality refactoring
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
github/gh-aw-firewall#8816 ·
-
integration:quickjs org:external priority:backlog topic:code-interpreter topic:middleware type:feature
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
langchain-ai/deepagents#6450 ·
-
optimization optimization:agents-md-curator
Difficulty 2/5 1-3 hours Newbie friendliness 86/100
githubnext/gh-aw-cao#13143 ·
-
status: needs triage
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 88/100