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

html:

<textarea id="custom-textarea" rows="1" oninput="autoResize(1, 3)">type e.g. more than 3 rows and strg + a -> delete and type again</textarea>

css:

textarea { line-height: 24px; width: 600px; }

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.