[docs] How to get the corner grabber in a multiline TextField displayed?

[TheRealCuran]

Related page

https://mui.com/material-ui/react-text-field/#multiline

Kind of issue

Missing information

Issue description

I want a multiline <TextField> which gets automatically transformed to a <TextareaAutosize> according to documentation (and it does). But it is missing the corner grabber, so a user can resize the field at leisure.

And I can't find any instruction on how to pass that down to the underlying <TextareaAutosize> (or maybe the default styling of <TextField> is blocking it?).

Please clarify the documentation to include instructions on how to get the corner grabber.

Context

I want a <TextField> that displays the corner grabber for resizing, that is part of <TextareaAutosize>.

Ie. I want to get

in my multiline <TextField> with minRows and maxRows.

In case it helps expedite the request: we are paying customers on the premium level: 💳 #84512

Search keywords: TextField, TextareaAutosize, resize, grabber

[siriwatknp]

The closest to what you want is to add resize: auto to the textarea to leverage CSS:

<TextField
  id="outlined-multiline-flexible"
  label="Multiline"
  multiline
  maxRows={4}
  sx={{
    [`& textarea:not([aria-hidden])`]: { resize: 'auto' }
  }}
/>

I don't think Material UI will provide this feature soon.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@TheRealCuran How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.