[material-ui][Text Field] Multiline variant cannot be made to scroll horizontally

[thenick775]

Summary

The TextareaAutosize when rendered by a TextField with multiline applies overflow: hidden to the resulting textarea dom element as an inline style in the current implementation.

This prevents the usecase I have, which is a textarea form input element that can grow vertically based on the size of the text contents, while also respecting whitespace and scrolling in the horizontal direction.

The fix should be as simple as splitting the overflow into overflow-x and overflow-y and applying these as css instead of inline styles so they can be overwritten.

Examples

https://github.com/mui/material-ui/blob/master/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx#L135 (existing implementation)

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

...
<TextField
  error={!!errors?.someInput}
  label="Some label"
  InputLabelProps={{
    shrink: true
  }}
  multiline
  fullWidth
  minRows={6}
  variant="outlined"
  InputProps={{
    sx: {
      ['textarea']: {
        whiteSpace: 'pre',
        overflowX: 'auto' // requires !important, cannot be accessed or overwritten otherwise
      }
    }
  }}
  helperText={errors?.someInput?.message}
  {...register('someInput')}
/>
...

Desired configurable behavior in in mp4 format:

Motivation

I am trying to make aTextfield that renders as a textarea, while allowing me to scroll horizontally while respecting whitespace. Preserving the behavior of: expanding vertically dynamically based on the users input, as many lines as necessary without restriction (the same as the current TextareaAutosize implementation).

I know I could assign a max number of rows. But I think there is a valid usecase with the want to expand vertically in an unlimited fashion within a scroll container, while also being able to override the inline overflow style.

Search keywords: textfield textarea mui core

[ZeeshanTamboli]

I believe the addition of the overflow: hidden property is meant to hide the scrollbar when the content is less than the maxRows and to not show scrollbar when the browser window is resized, potentially addressing issue #9277. However, applying this style through inline CSS may not be the optimal solution. I'll label this as an enhancement rather than a bug. If you have any suggestions, please feel free to comment or submit a pull request.