[TextareaAutosize] Unstable height when rendered in a Next.js RSC page

[vladpaul09]

Steps to reproduce 🕹

Live example: https://codesandbox.io/p/sandbox/https-github-com-mui-material-ui-issues-38607-5h5ndr?file=%2Fsrc%2Fapp%2Fpage.tsx%3A22%2C1

Unstable height TextField multiline on nextjs app router when i reload the page.
Same thing happens on page first load.
For bug reproduction, i used material-ui-nextjs-ts from the example folder.
Video below.

nextjs-app-router-textfield-multiline-unstable-height.mp4

Current behavior 😯

No response

Expected behavior 🤔

No response

Context 🔦

No response

Your environment 🌎

Expand

System:
OS: Windows 10 10.0.19044
Binaries:
Node: 16.16.0 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 116.0.5845.97
Edge: Spartan (44.19041.1266.0), Chromium (116.0.1938.54)
npmPackages:
@emotion/react: latest => 11.11.1
@emotion/styled: latest => 11.11.0
@mui/base: 5.0.0-beta.11
@mui/core-downloads-tracker: 5.14.5
@mui/icons-material: latest => 5.14.3
@mui/material: latest => 5.14.5
@mui/private-theming: 5.14.5
@mui/styled-engine: 5.13.2
@mui/system: 5.14.5
@mui/types: 7.2.4
@mui/utils: 5.14.5
@types/react: latest => 18.2.21
react: 18.x => 18.2.0
react-dom: 18.x => 18.2.0
typescript: latest => 5.1.6

Search keywords:

Search keywords:

[mj12albert]

@vladpaul09 I can reproduce this – as a workaround for now, you can wrap the component with NoSsr to achieve the effect on load if the parent wasn't an RSC component/page, here's a working sandbox: https://codesandbox.io/p/sandbox/https-github-com-mui-material-ui-issues-38607-5h5ndr?file=%2Fsrc%2Fapp%2Fpage.tsx%3A22%2C1

For reference, here's how the TextareaAutosize looks on load in a normal sandbox (no Next.js, no RSC) https://codesandbox.io/s/textareaautosize-no-rsc-s5cs9c

[michaldudak]

We don't have access to the DOM node on the server (as it doesn't exist there), so it's impossible to measure its height. I can't really think of another fix than the workaround suggested by @mj12albert.

[oliviertassinari]

As far as I know, it's a regression from #35862. In the reproduction, the field is empty, there is no content to sync the layout with after hydration, so it doesn't matter of it's client-side or server-side rendered, we can fully rely on CSS

Simple fix:

diff --git a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx
index 9f582765f6..b9a1b045d1 100644
--- a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx
+++ b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx
@@ -69,7 +69,7 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(
   const shadowRef = React.useRef<HTMLTextAreaElement>(null);
   const renders = React.useRef(0);
   const [state, setState] = React.useState<State>({
-    outerHeightStyle: 0,
+    outerHeightStyle: undefined,
   });

   const getUpdatedState = React.useCallback(() => {

To make the types passs is tricker, maybe:

diff --git a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx
index 9f582765f6..7786524b89 100644
--- a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx
+++ b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx
@@ -10,9 +10,14 @@ import {
 } from '@mui/utils';
 import { TextareaAutosizeProps } from './TextareaAutosize.types';

+type InitialState = {
+  outerHeightStyle: undefined;
+  overflow?: boolean;
+};
+
 type State = {
   outerHeightStyle: number;
-  overflow?: boolean | undefined;
+  overflow?: boolean;
 };

 function getStyleValue(value: string) {
@@ -68,8 +73,8 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(
   const handleRef = useForkRef(forwardedRef, inputRef);
   const shadowRef = React.useRef<HTMLTextAreaElement>(null);
   const renders = React.useRef(0);
-  const [state, setState] = React.useState<State>({
-    outerHeightStyle: 0,
+  const [state, setState] = React.useState<InitialState | State>({
+    outerHeightStyle: undefined,
   });

   const getUpdatedState = React.useCallback(() => {
@@ -127,7 +132,7 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(
     return { outerHeightStyle, overflow };
   }, [maxRows, minRows, props.placeholder]);

-  const updateState = (prevState: State, newState: State) => {
+  const updateState = (prevState: State | InitialState, newState: State) => {
     const { outerHeightStyle, overflow } = newState;
     // Need a large enough difference to update the height.
     // This prevents infinite rendering loop.

Before

Screen.Recording.2023-10-08.at.16.45.43.mov

After

Screen.Recording.2023-10-08.at.16.46.09.mov

[gitstart]

@mj12albert @michaldudak @oliviertassinari we would like to pick this up