[TextareaAutosize] Resizing unstable

[hyorimitsu]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/modest-ellis-gzqt92

Steps:

1. Attempt to resize the textarea in the provided sandbox link. You'll notice the resizing behavior is erratic and the style {{ backgroundColor: "yellow" }} fails to apply.
2. Upon downgrading @mui/material to version 5.15.10, both the resizing behavior and style application work as expected.

Current behavior

• The textarea resizing is unpredictable, leading to a poor user experience.
• Styles specified (e.g., background color) are not being applied as intended.

https://github.com/mui/material-ui/assets/52403055/b4be59e3-dd5c-44bd-ac7e-3c2edb800040

Expected behavior

• The textarea should resize smoothly, without any instability.
• All specified styles should be correctly applied to ensure consistent design integrity.

https://github.com/mui/material-ui/assets/52403055/c103b87f-572f-45d1-adfc-fc7f7b8bba6c

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: Linux 5.10 Alpine Linux
  Binaries:
    Node: 20.11.0 - /usr/local/bin/node
    npm: 10.2.4 - /usr/local/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: ^11.11.3 => 11.11.3 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.37 
    @mui/core-downloads-tracker:  5.15.11 
    @mui/icons-material: ^5.15.11 => 5.15.11 
    @mui/material: ^5.15.11 => 5.15.11 
    @mui/private-theming:  5.15.11 
    @mui/styled-engine:  5.15.11 
    @mui/system:  5.15.11 
    @mui/types:  7.2.13 
    @mui/utils:  5.15.11 
    @mui/x-charts: ^6.19.5 => 6.19.5 
    @mui/x-data-grid: ^6.19.5 => 6.19.5 
    @mui/x-date-pickers: ^6.19.5 => 6.19.5 
    @mui/x-tree-view: ^6.17.0 => 6.17.0 
    @types/react: ^18.2.58 => 18.2.58 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^5.3.3 => 5.3.3

Search keywords: TextareaAutosize,resizing,styles,5.15.11

Search keywords:

[nktnet1]

I am facing a relevant issue with the TextField component set to "multiline" (i.e. textarea) below:

import React from "react";
import { TextField } from "@mui/material";

export default function EmptyTextarea() {
  return (
    <div>
      <TextField
        label="MUI Text Area"
        multiline
        variant="outlined"
        inputProps={{ style: { resize: "vertical" } }}
      />
    </div>
  );
}

The resizeable icon, which should appear at the bottom right corner as a result of the inputProps, is gone.

When inspecting the element, CSS says

resize: none;

Here is the sandbox:

• https://codesandbox.io/p/sandbox/textarea-mui-5-15-11-bug-hzz4zf?file=%2Fpackage.json

Changing package.json in the sandbox back to @mui/materal v5.15.10 fixes the issue (i.e. the drag icon is visible again at the bottom right corner).

[ZeeshanTamboli]

This issue is a regression from mui/material-ui#40789. I've submitted a PR, mui/material-ui#41369, to address the problem of styles not being applied.

[ZeeshanTamboli]

Style issue is resolved.

[nktnet1]

@ZeeshanTamboli thank you for fixing the style issue!

Do you have any idea what the other issue is? i.e. regarding the glitchy drag in hyorimitsu's original post.

Using your CodeSandbox from https://github.com/mui/material-ui/pull/41369

After: https://codesandbox.io/p/sandbox/compassionate-napier-7tnq6l

This is what I see:

https://github.com/mui/base-ui/assets/86177399/d76c4425-db80-4aa4-888e-43dabb54ce9f

This is what the behaviour used to be like (the video shows 5.11.11 accidentally, but the last working is 5.15.10. Things broke in 5.15.11): https://codesandbox.io/p/sandbox/mui-textarea-and-textfield-yx88dk?file=%2Fpackage.json%3A13%2C30

https://github.com/mui/base-ui/assets/86177399/139c0190-ba0e-418c-b731-26dd0910ddbe

[ZeeshanTamboli]

@nktnet1 I'm not sure what the problem might be, but I'll take a look.

[hyorimitsu]

@ZeeshanTamboli Thank you for fixing the style issue!

You might already be aware, but just for your reference, I'd like to share my understanding of the bug related to resizing:

• The calculateTextareaStyles function's return value for outerHeightStyle is always the same. As a result, resizing causes the height to momentarily revert to its original value, leading to unstable behavior. (https://github.com/mui/base-ui/blob/master/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx#L70-L124)

• This behavior, which involves always getting the same value, has been present since before the fix for https://github.com/mui/material-ui/pull/40789, when the function was called getUpdatedState.

  • It appears that the height was being changed by maintaining height in the state and passing it as style props. However, in reality, the value of state.outerHeightStyle has always remained unchanged. (https://github.com/mui/material-ui/pull/40789/files#diff-4bad88270b0417529b9c97204bcd993e4117f43e6ba590c8c20ddc49157d09a2L256)

I apologize if there has been any misunderstanding.

[ZeeshanTamboli]

Thanks to @hyorimitsu for helping to pinpoint the cause of the issue. I've submitted a PR to address it - mui/base-ui#189.

[colmtuite]

Auto-sizing can be handled natively these days with field-sizing. So we're going to deprecate this component soon.

Demo

[oliviertassinari]

Even if deprecated, it will likely take two years to remove it, the time it will take for browser support to propagate https://github.com/mui/material-ui/issues/43720.

So I'm reopening, there are no real alternatives in production today, and it's still a regression.

If browser support propagates more rapidly, then the considerations would only be about backward compatibility, to give people time to migratre away.

[ZeeshanTamboli]

For those who are using @mui/base or @mui/material, this got fixed in https://github.com/mui/material-ui/pull/41638.

[hyorimitsu]

Thank you for the fix! It is greatly appreciated!