[material-ui][TextField] When with minRows, it makes the height from small to final height about material-ui HOT 13 OPEN

I can repro with throttling x6. Accepting as a bug and adding the ready-to-take label.

from material-ui.

@ZeeshanTamboli do you know if this might be related to the recent TextareaAutosize fixes?

from material-ui.

do you know if this might be related to the recent TextareaAutosize fixes?

Doesn't look related to the recent TextareaAutosize fixes. And I cannot reproduce the issue:

from material-ui.

@ZeeshanTamboli Try open the devtools and disable cache.

In your video, 0.01 to 0.03 reproduce the issue, check your video carefully

from material-ui.

@ZeeshanTamboli You can more easily to reproduce by using performance throttle to slow down performance:

from material-ui.

chrome126 support throttling x20 😄

from material-ui.

This may be expected behavior. The field cannot know how tall the rendered rows of text will be without rendering a line of text client-side, which would always result in a CLS problem.

Potential solutions

• The developer provides a hint to TextareaAutosize about how tall one line would be, which could populate the initial render.
• TextareaAutosize has an option to not resize until the first user interaction. This eliminates the CLS problem but makes the component "wiggly" to use.
• Developer uses sx to set a minimum height when CLS matters.

General note

The offending code seems to be around here: https://github.com/mui/material-ui/blob/master/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx#L71

from material-ui.

Some cases can use minHeight, but sometimes the initial height is large than final actual height.

I had to use maxHeight and remove the limit after after render:

import { TextField } from '@mui/material';

export default function MuiTextareaMinRows() {
    const ref = useRef(null);

    const [maxHeight, setMaxHeight] = useState('43px');

    useEffect(() => {
        if (typeof window !== 'undefined') {
            setTimeout(() => {
                setMaxHeight('unset');
            }, 500);
        }
    }, []);

    return (
        <TextField
            sx={{
                'marginTop': 3,
                '& > .MuiInputBase-multiline': {
                    p: '10px 12px',
                },
                maxHeight,
                '& .MuiOutlinedInput-root': {
                    maxHeight,
                },
            }}
            size="small"
            placeholder="Anything you’d like to exclude?"
            multiline
            minRows={1}
            fullWidth
        />
    );
}

from material-ui.

If I use minHeight the placeholder text will change position:

export default function MuiTextareaMinRows() {
    const [maxHeight, setMaxHeight] = useState('43px');

    useEffect(() => {
        if (typeof window !== 'undefined') {
            setTimeout(() => {
                setMaxHeight('unset');
            }, 500);
        }
    }, []);

    return (
        <>
            <TextField
                multiline
                minRows={4}
                placeholder="e.g. A cat is sitting on a table"
                fullWidth
                sx={{
                    '& > .MuiInputBase-multiline': {
                        minHeight: '149px',
                    },
                }}
            />

            <TextField
                sx={{
                    'mt': 2,
                    '& > .MuiInputBase-multiline': {
                        maxHeight,
                        p: '10px 12px',
                    },
                }}
                size="small"
                placeholder="Anything you’d like to exclude?"
                multiline
                minRows={1}
                fullWidth
            />
        </>
    );
}

from material-ui.

@tjx666 I have handled this in the past by using minHeight in sx and not using minRows. You can set the value in terms of em units with help from lineHeight to be exactly what minRows would be without using the client side JS.

from material-ui.

@mi-na-bot can you provide a piece of simple code to demo?

from material-ui.

@tjx666 It depends on understanding the styling. There are two cases, whether the line-height is set as a scalar or a value with units. Hope this helps!

https://codesandbox.io/p/sandbox/polished-surf-c5x353

from material-ui.

Thanks your help @mi-na-bot I also decide give up official minRows property and set the minHeight/maxHeight manually

from material-ui.