mui
[TextField] Backspacing after line break in multiline causes height issues on Safari
Steps to reproduce
Steps:
- Open this link to live example: https://codesandbox.io/embed/frpzyp?module=/src/Demo.tsx&fontsize=12(required) 2.Enter a line of English characters with space in the middle. 3.Enter one more character and the line will wrap. Deleting a character will cause height problems.
Current behavior
On safari
https://github.com/user-attachments/assets/203e552e-c4b4-4bff-8114-8ee3a15358e2
Expected behavior
On Chrome
https://github.com/user-attachments/assets/b6a8ce13-6033-4cb7-86fc-62b1ee2f4212
Context
No response
Your environment
npx @mui/envinfo
On safari
Search keywords: Textfield multiple height
It reproduces here too: https://codesandbox.io/p/devbox/focused-bessie-vy64pw
So at least this is an independent issue and not another problem with ResizeObserver 🤞
Hi @xiaoxiaofan123 , I'm interested in contributing to this issue. Could you please assign it to me? Looking forward to working on it!
Hi @himani-mehra, you can fork the repo and work on the issue directly. Submit a PR, and we'll review it. If everything looks good, we'll merge it. Looking forward to your contribution! 🚀
Apologies @0210shivam, I just noticed the issue is specific to Safari, and I primarily use Windows. @xiaoxiaofan123, feel free to take it up if you'd like. Thanks!
Hi @mj12albert! I'd like to work on this issue. This will be my first open source contribution!
Root Cause
In safari when textarea height is reduced programmatically, Safari updates the height but does not recalculate text line wrapping & caret position. Chrome handles this correctly
Proposed Fix
We can force textline wrapping recalculation in Safari by changing the textArea width.
const selectionStart = textarea.selectionStart;
const selectionEnd = textarea.selectionEnd;
const tempValue = textarea.value;
textarea.value = '';
textarea.offsetHeight; // Force reflow
textarea.value = tempValue;
// Restore selection
if (document.activeElement === textarea) {
textarea.setSelectionRange(selectionStart, selectionEnd);
}
Should this be Safari-specific or applied to all browsers? Happy to adjust based on your feedback!
