Closed hyorimitsu closed 4 months ago
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:
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).
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.
Style issue is resolved.
@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
@nktnet1 I'm not sure what the problem might be, but I'll take a look.
@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
.
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.
Thanks to @hyorimitsu for helping to pinpoint the cause of the issue. I've submitted a PR to address it - mui/base-ui#189.
Auto-sizing can be handled natively these days with field-sizing
. So we're going to deprecate this component soon.
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.
For those who are using @mui/base
or @mui/material
, this got fixed in https://github.com/mui/material-ui/pull/41638.
Thank you for the fix! It is greatly appreciated!
Steps to reproduce
Link to live example: https://codesandbox.io/p/sandbox/modest-ellis-gzqt92
Steps:
{{ backgroundColor: "yellow" }}
fails to apply.Current behavior
https://github.com/mui/material-ui/assets/52403055/b4be59e3-dd5c-44bd-ac7e-3c2edb800040
Expected behavior
https://github.com/mui/material-ui/assets/52403055/c103b87f-572f-45d1-adfc-fc7f7b8bba6c
Context
No response
Your environment
``` 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 ```npx @mui/envinfo
Search keywords: TextareaAutosize,resizing,styles,5.15.11
Search keywords: