Material-ui: TextField MultiLine Doesn't Work When ForceRederTabPanel Is Set To True In React-Tabs

[vigneshrangaraj]

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Problem Description

MultiLine feature for TextField doesn't show up until the component is clicked on or hovered over. This is happening because I set forceRenderTabPanel to true and the component is initially hidden on load. If the component loads first, this doesn't happen.

Link to minimal working code

https://codesandbox.io/s/v8jqjmylw7

Versions

Material-UI: 3.8.3
React-tabs: 3.0.0
React: 16.3.2
Browser: Chrome

[joshwooding]

This is caused by the same problem as https://github.com/mui-org/material-ui/issues/14077 but replicated by the hidden tab instead of React Suspense.

[oliviertassinari]

I have built a simpler reproduction: https://codesandbox.io/s/q8qx41qo2w.

[oliviertassinari]

As suggested by @joshwooding, using the IntersectionObserver API, when available (IE 11 and Safari are problematic), is a viable option: https://jsfiddle.net/elmarj/u35tez5n/5/.

Now, we have to solve the same problem with server-side rendering where we can't read the DOM layout values. I think that we start with a simple fix like this:

--- a/packages/material-ui/src/InputBase/Textarea.js
+++ b/packages/material-ui/src/InputBase/Textarea.js
@@ -115,7 +115,11 @@ class Textarea extends React.Component {
       this.shadowRef.value = props.value == null ? '' : String(props.value);
     }

-    const lineHeight = this.singlelineShadowRef.scrollHeight;
+    let lineHeight = this.singlelineShadowRef.scrollHeight;
+    // The Textarea might not be visible (display: none).
+    // In this case, the layout values read from the DOM will be 0.
+    lineHeight = lineHeight === 0 ? ROWS_HEIGHT : lineHeight
+
     let newHeight = this.shadowRef.scrollHeight;

     // Guarding for jsdom, where scrollHeight isn't present.

[vigneshrangaraj]

I have built a simpler reproduction: https://codesandbox.io/s/q8qx41qo2w.

Thank you for this. Didn't know it was a generic visibility issue. :)