[TextareaAutosize] Fix wrong height measurement

[theweipeng]

if the textarea style contain paddingRight and value has multi line, the shadow textarea can't follow the textarea corrently. so we can't overwrite the paddingLeft and paddingRight

[mui-bot]

Netlify deploy preview

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

Bundle size report

Details of bundle changes

Generated by 🚫 dangerJS against fe2956b

[michaldudak]

Please provide a before/after reproduction so we can verify if it's indeed a bug and then test it.
Also, for the future, it's better to open an issue describing the problem first.

[theweipeng]

Please provide a before/after reproduction so we can verify if it's indeed a bug and then test it. Also, for the future, it's better to open an issue describing the problem first.

sorry，I will open an issue next time.

@michaldudak

Reproducing

code

create a TextareaAutosize which paddingRight 100 and boxSizing: 'border-box'

function App() {
  const [value, setValue] = useState("1");
  return (
    <div className="App">
      <div>value of TextareaAutosize: </div>
      <div>{value}</div>
      <div>TextareaAutosize paddingRight 100</div>
      <TextareaAutosize
        onChange={(e) => setValue(e.target.value)}
        value={value}
        style={{ paddingRight: 100, width: 200, boxSizing: "border-box", overflow: 'scroll' }}
      />
    </div>
  );
}

snapshot

we can find TextareaAutosize can't measure the height correctly。
in the file "packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx" we use "inputShallow.style.width = computedStyle.width;" to set the width of the shadow textarea. but if the textarea's boxSizing is 'border-box' and paddingRight greate than 0, the shadow textarea's width would set a incorrect value

textarea size info

both textarea has same width, but handle textarea has paddingRight

After fix

if we use textarea's paddingLeft and paddingRight , it would be work fine

[michaldudak]

Looks good! Could you please add a test verifying the fix?

[theweipeng]

Looks good! Could you please add a test verifying the fix?

Certainly! I added a test to verify the fix.

[michaldudak]

Thanks! I've got some stylistic remarks. Besides that it's OK!

[michaldudak]

Thanks for working on this!