mui
[TextField] Fix Backspacing after line break in multiline causes heig…
- [X] I have followed (at least) the PR section of the contributing guide.
This is my first Open source contribution. This PR fixes an issue in TextField height when the multiline prop is passed.
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);
}
Fixes
Fixes #45293
Netlify deploy preview
https://deploy-preview-47443--material-ui.netlify.app/
Bundle size report
| Bundle | Parsed size | Gzip size |
|---|---|---|
| @mui/material | 🔺+224B(+0.04%) | 🔺+98B(+0.06%) |
| @mui/lab | 0B(0.00%) | 0B(0.00%) |
| @mui/system | 0B(0.00%) | 0B(0.00%) |
| @mui/utils | 0B(0.00%) | 0B(0.00%) |
Generated by :no_entry_sign: dangerJS against 0e49052ac40a99ca46cb3bfae20fdab96787e9c9
Thank you, @mj12albert, for reviewing the PR. Required changes are done, please review again