Textarea scrollHeight Decreases by 2px When Typing After Deleting All Content in Blazor Application

Problem Description

I am experiencing an issue with the autoResize function for a textarea element in my Blazor application. The problem occurs when I have multiple rows of text in the textarea, delete all the content, and then start typing again. The scrollHeight of the textarea decreases by 2px each time I type a character, and it takes around 16 characters before the content height is correct again.

js debug log messages

Code Snippet

Here is the relevant part of my autoResize function in:

export function autoResize(minRows, maxRows) {
    let textarea = document.getElementById("custom-textarea");

    if (textarea == null) {
        return;
    }

    // Ensure consistent box-sizing
    textarea.style.boxSizing = 'border-box';

    const lineHeight = parseFloat(window.getComputedStyle(textarea).lineHeight);
    textarea.style.height = "auto";

    // Calculate the height required based on the content
    const contentHeight = textarea.scrollHeight;
    const divided = contentHeight / lineHeight;
    const lines = Math.floor(divided);
    const rows = Math.min(maxRows, Math.max(minRows, lines));
    const isOverflow = lines > maxRows;

    console.log(`lineHeight: ${lineHeight}, contentHeight: ${contentHeight}, divided: ${divided}, lines: ${lines}, rows: ${rows}, isOverflow: ${isOverflow}`);

    textarea.overflowY = isOverflow ? "scroll" : "hidden";
    textarea.rows = rows;
    textarea.style.height = rows * lineHeight + "px";
    textarea.style.minHeight = lineHeight + "px";
    textarea.style.maxHeight = contentHeight + "px";
    textarea.scrollTop = textarea.scrollHeight;
}

Steps to Reproduce

  1. Type multiple rows of text in the textarea.
  2. Delete all the content.
  3. Start typing again.

Observed Behavior

  • The scrollHeight of the textarea decreases by 2px each time a character is typed.
  • It takes around 16 characters before the content height is correct again.

Expected Behavior

  • The scrollHeight should adjust correctly without decreasing by 2px each time a character is typed.

Additional Information

  • The textarea element is dynamically resized based on its content using the autoResize function.
  • The issue seems to be related to the resetting and recalculating of the textarea height.

Question

How can I fix the autoResize function to ensure that the scrollHeight adjusts correctly without decreasing by 2px each time a character is typed after deleting all content?

What Did I Already Try

  1. Resetting Height to ‘auto’: I ensured that the textarea height is reset to 'auto' before recalculating the new height to allow it to shrink if necessary.

  2. Consistent Box-Sizing: I set the box-sizing property to border-box to include padding and border in the element’s total width and height.

  3. Line Height Calculation: I verified that the line height is being calculated correctly using window.getComputedStyle.

  4. JavaScript Logic: I reviewed the JavaScript logic to ensure that the height is being reset and recalculated correctly.

  5. CSS Styling: I checked the CSS styles to ensure that padding, border, and margin settings are not affecting the height calculations.

  6. Browser Testing: I tested the behavior in different browsers to rule out browser-specific rendering quirks.

Despite these efforts, the scrollHeight of the textarea still decreases by 2px each time a character is typed after deleting all content, and it takes around 16 characters before the content height is correct again.