DEV Community

muflih1
muflih1

Posted on

Why does the textarea rows count not decrease when content is removed?

When I don't set the rows to state or textAreaRef.current.rows = calculatedRows, the console log properly increases and decreases the calculatedRows. However, as soon as I set the calculatedRows to the state or textAreaRef.current.rows = calculatedRows, it increases the rows but does not decrease them; it stays at the last calculatedRows.

import React, { useState, useRef, useEffect } from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";

const TextArea = styled.textarea`
  padding: 2px;
  resize: none;
  overflow-y: hidden;
  line-height: 1.5;
`;

function App() {
  const [val, setVal] = useState("");
  const textAreaRef = useRef(null);
  const [rows, setRows] = useState(1);

  const resizeTextArea = () => {
    const lineHeight = parseInt(
      window.getComputedStyle(textAreaRef.current).lineHeight
    );
    const calculatedRows = Math.floor(
      textAreaRef.current.scrollHeight / lineHeight
    );
    console.log(calculatedRows);
    setRows(calculatedRows);
  };

  useEffect(() => {
    resizeTextArea();
  }, [val]);

  const onChange = (e) => {
    setVal(e.target.value);
  };

  return (
    <div>
      <TextArea ref={textAreaRef} value={val} onChange={onChange} rows={rows} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Enter fullscreen mode Exit fullscreen mode

I expected the number of rows in the textarea to decrease when content is removed, but it only increases. I've tried using setRows(calculatedRows) and textAreaRef.current.rows = calculatedRows to update the number of rows but encountered the same issue.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay