How to make Textarea height adjust responsively?

[joetidee]

I have a textarea that contains text on two lines. When I increase the width of the container that surrounds the textarea, the lines decreases to just one. However, the height of the textarea does not shrink. How to I make this happen?

[FrancescoCioria]

Hi @joetidee, this is weird: it should work and in fact it's working in my tests.

Can you post here a sample of your code so to help me reproduce it?

[joetidee]

I am extending the TextareaAutosize using styled-components, as per below:

import React from 'react';
import styled from 'styled-components';
import TextareaAutosize from 'react-autosize-textarea';

const TextareaAutosizeSC = styled(TextareaAutosize)``;

const StyledItemTextarea = TextareaAutosizeSC.extend`
    background-color: ${({ theme }) => theme.autosizeTextarea['background-color']};
    border-color: transparent;
    border-radius: ${({ theme }) => theme.autosizeTextarea['border-radius']};
    color: ${({ theme }) => theme.typography.color};
    font-family: ${({ theme }) => theme.typography['font-family']};
    font-size: ${({ theme }) => theme.typography['font-size']};
    line-height: ${({ theme }) => theme.typography['line-height']};
    outline: none;
    padding: 3px 6px;
    resize: none;
    width: 100%;
`;

export const ItemTextarea = (props) => <StyledItemTextarea {...props} />;

But, I have also just used it using a direct import and this is also not working shrinking:

import TextareaAutosize from 'react-autosize-textarea';

I can't see any responsive examples in your demo page that confirm this is working.

[tobiastheil]

I can confirm this issue.

Here you can see an live example: https://www.thinkstiki.com/notes/3084-120-2.-Culture

Scroll down (title gets smaller) and scroll up again. Maybe you need to resize your browser window (so you can scroll) or look for a longer note. It's not happening every time though.

[FrancescoCioria]

@tobiastheil thanks for the live example

the issue in your case is that your changing only the CSS without causing any re-render of the textarea, so it doesn't realize its content has shrinked/grown because of the new font-size.

If you look closely you always have an issue:
if the page starts with a big textarea, when you scroll down that textarea is bigger than it should be
if the page starts with a small textarea (example you reduce the window size, scroll down, than increase the window again), when you scroll up the textarea is smaller than it should be

Unfortunately there is no way for the textarea to realize its font-size has changed unless you pass it as a prop with inline style.

@joetidee
Sorry but I haven't succeeded yet in replicating your issue... :(

I can't see any responsive examples in your demo page that confirm this is working.

I've added an example with styled-components + width: 100% to simulate a responsive environment like yours. You can play with it here (it's the last example at the bottom of the page)

[joetidee]

Yeah, I just couldn't seem to replicate the issues I was having using the example that you provided. Must be something very specific that is causing it (maybe flexbox related?). Either way, I have resolved my issue by wrapping my content in a parent div that is resizable (see re-resizable npm package) and when this is resized it sends props to my textareas, which in turn resizes them.