Material-ui: [TextareaAutosize] Handle container with no intrinsic height

[saravremo]

• [ ] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When the wrapper div/element is shrinked to 0px width and expanded to full width again, the InputBase with multiline property is set to max height even though there is no content inside it.

Expected Behavior 🤔

Height of the InputBase should stay same.

Steps to Reproduce 🕹

Codesandbox here: https://codesandbox.io/s/jovial-zhukovsky-5dric?file=/index.html

Context 🔦

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | 4.9.14 |
| React | 16.9.0 |
| Browser | Chrome v83.0.4103.116 |
| TypeScript | |
| etc. | |

[oliviertassinari]

@saravremo Thanks for the reproduction. What do you think about this fix?

diff --git a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js
index b89c04ed81..a593af4e3f 100644
--- a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js
+++ b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js
@@ -42,6 +42,12 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref)
     const input = inputRef.current;
     const computedStyle = window.getComputedStyle(input);

+    // The component is shrunk and hence, not visible.
+    // We can't sync the height nor does it make sense.
+    if (computedStyle.width === '0px') {
+      return;
+    }
+
     const inputShallow = shadowRef.current;
     inputShallow.style.width = computedStyle.width;
     inputShallow.value = input.value || props.placeholder || 'x';

Do you want to work on a pull request? :)

[ruhci28]

Hii, can i work on this .?

[oliviertassinari]

@ruhci28 Sure, we would also need to add a test to cover the case.

[ruhci28]

Thanks

[ruhci28]

Hii, @oliviertassinari i applied the above suggested fix , i am new to opensource can you can guide how i should proceed now to add a test cover and what else i have to add in TextAreaAutoSize.js file

[oliviertassinari]

I would recommend looking at the existing tests, and the CONTRIBUTION.md guide. Maybe @eps1lon has a specific learning 📕 material recommendations for the tests.

[ruhci28]

ok

[mdsadiq]

i would like to give it a try, if no one is working on it

[eps1lon]

i would like to give it a try, if no one is working on it

Feel free to work on a PR. Please report back if you no longer intend to work on it. If you're stuck you can open a PR anyway and a maintainer will take a look. I assigned you this issue for bookkeeping purposes only.

[mdsadiq]

I had made the necessary changes as mentioned in comment.

To test if the end result is as expected, I did the following.
1, ran the command yarn run build in packages/material-ui/
on success,
2, ran the command yarn link in packages/material-ui/build/

Now i had created a sample project with example created above,
it is working fine and am able to reproduce the error as expected.

3, ran the command yarn link "@material-ui/core" which was the result of step 1 to test the changes and ran yarn run start

the sample project started throwing following error

/packages/material-ui-styles/src/ServerStyleSheets/ServerStyleSheets.js: Support for the experimental syntax 'jsx' isn't currently enabled (20:7):

  18 | 
  19 |     return (
> 20 |       <StylesProvider
     |       ^
  21 |         sheetsManager={sheetsManager}
  22 |         serverGenerateClassName={generateClassName}
  23 |         sheetsRegistry={this.sheetsRegistry}

Add @babel/plugin-transform-react-jsx (https://git.io/vb4yd) to the 'plugins' section of your Babel config to enable transformation.

Questions:
a. Am i in right path with respect to checking the changes made in library ?
b. Is there a way documented somewhere to test the changes ?(sorry i couldn't find it in the documentation anywhere, but i remember seeing it sometime ago)
c. If this is right direction, any idea how do i go about this ?

PS. i am not talking about test cases here.

[eps1lon]

I recommend working in a demo under docs/src/page instead while running yarn docs:dev.

[mdsadiq]

Thanks @eps1lon i was able to test the changes with ease.
Starting with test cases now