CODEWITHSUNDEEP
javascriptblazortextareaautoresizeline-height
lwlstj
lwlstj

Reputation: 1

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

Expected Behavior

Additional Information

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.

Upvotes: 0

Views: 63

Answers (0)

Related Questions