When using TextareaAutosize from MUI, a problem arises where you have to click the textarea again every time you enter a character

Question

When using TextareaAutosize from MUI, a problem arises where you have to click the textarea again every time you enter a character. More precisely, a problem occurs when using

StyledTextarea = styled(TextareaAutosize)

This works as I intended.

const Hello = ()=> {
    const [text, setText] = useState('');
    const handleTextChange = (event) => {
        setText(event.target.value);
    };

    return (
        <div>
            <TextareaAutosize
                value={text}
                onChange={handleTextChange}
                autoCorrect='false'
                minRows={15}
            />
            
        </div>
    );
};

export default Hello;

But this creates the problem I mentioned in the title.

const Hello = ()=> {

    const [text, setText] = useState('');
    const handleTextChange = (event) => {
        setText(event.target.value);
    };

    const StyledTextarea = styled(TextareaAutosize)(
    ({ theme }) => `border-radius: 12px 12px 0 12px;`



    return (
        <div>
            <StyledTextarea
                value={text}
                onChange={handleTextChange}
                autoCorrect='false'
                minRows={15}
            />
            
        </div>
    );
};

export default Hello;

I understand that "styled" does not affect the functionality and props of the component. So I'm curious why this problem occurs and how to solve it.

Answer 1

You have to move the declaration of StyledTextarea outside the component, because with every render, it will be re-created and it will loose it's focus.

const StyledTextarea = styled(TextareaAutosize)`
   ({ theme }) => border-radius: 12px 12px 0 12px;
`;

const Hello = () => {
  const [text, setText] = useState('');
  const handleTextChange = (event) => {
    setText(event.target.value);
  };