Search code examples
reactjsmaterial-uitextareascrollbarshrink

Bring up scrollbar when <TextareaAutosize> is shrunk

I am using a <TextareaAutosize> component from the Material UI Library in my React app, as such:

<TextareaAutosize 
   minRows="2"
   style={{resize: "vertical"}}
/>

This creates a textarea that autosizes based on the size of the content. I have styled it so that the user is only able to manually expand vertically.

The current behavior is that, when the user shrinks the textbox, there is no way to view the content out of sight. My goal is to bring up the scroll bar when the user shrinks the text area.

View CodeSandbox to test.

Solution

  • Simply add overflow: 'auto' to the style attribute.

    <TextareaAutosize
  minRows="2"
  style={{ width: '50%', resize: 'vertical', overflow: 'auto' }}
/>

    Codesandbox