[TextField] Fix Backspacing after line break in multiline causes heig…

[Hukumchand-Narwre]

• 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

[mui-bot]

Netlify deploy preview

https://deploy-preview-47443--material-ui.netlify.app/

Bundle size report

Bundle	Parsed size	Gzip size
@mui/material	🔺+143B(+0.03%)	🔺+51B(+0.03%)
@mui/lab	0B(0.00%)	0B(0.00%)
@mui/system	0B(0.00%)	0B(0.00%)
@mui/utils	0B(0.00%)	0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 2225183