Textarea Content Truncation During Autofill in Microsoft Edge - Microsoft Q&A

2024-12-03T23:18:26.5866667+00:00

Hello,

I’ve encountered an issue in Microsoft Edge where the content of a <textarea> element gets visually truncated during autofill interactions. The truncation seems to occur after selecting a suggested value from the autofill dropdown in an adjacent <input> field. The issue is particularly noticeable when the <textarea> contains a very long text (approximately 3000 characters or more).

Steps to Reproduce:

<form>

    <input type="text" id="name" autocomplete="on" placeholder="Enter your name">

    <textarea id="comments" rows="10">

        This is a long text that exceeds 3000 characters to demonstrate the truncation issue in Edge.

       (Repeat this or similar text to reach 3000 characters.)

    </textarea>

</form>

1. Save the HTML provided above into a file (e.g., test.html). Please not that textarea has to be very long say more than 3000 chars
2. Serve the file via Nginx or similar server
3. Access the file in Microsoft Edge

4.Interact with the page as follows:

• Focus on the <input> field (name).

• Ensure the autofill dropdown appears.

• Hover over the suggestions in the autofill dropdown.

• Select a suggestion from the dropdown.

5. Observe the behavior of the <textarea>:

• Check if the text becomes visually truncated.

• Open the Developer Tools (F12) and inspect the DOM content of the <textarea>.

• Note that the full text remains in the DOM but is not fully rendered.

Expected Behavior

• The <textarea> should display all its content regardless of autofill interactions.

Observed Behavior

• The <textarea> content is visually truncated after selecting an autofill entry.

Thanks,

1 answer

Your answer