userEvent types into textarea text that is jumbled than what it is told to type

[sikandarali94]

• @testing-library/user-event version: 13.5.0

• Testing Framework and version: jest@24.9.0

• DOM Environment: jsdom

Note: this code follows the Test Drive the API Call of a React Form with React Testing Library video from Testing JavaScript course (it is modified to use userEvent and screen, as the video in the course is out of date).

Test

import React from 'react';
import userEvent from '@testing-library/user-event';
import {render, screen} from '@testing-library/react';

import {savePost as mockSavePost} from '../api';
import {Editor} from '../post-editor-01-markup';

jest.mock('../api');

test('renders a form with title, content, tags, and a submit button', () => {
    mockSavePost.mockResolvedValueOnce()
    render(<Editor />);

    const fakePost = {
        title: 'Test Title',
        content: 'Test Content',
        tags: ['tag1', 'tag2']
    };

    const titleInput = screen.getByLabelText(/title/i, {});
    userEvent.type(titleInput, fakePost.title);

    const contentInput = screen.getByLabelText(/content/i, {});
    userEvent.type(contentInput, fakePost.content); // Here is the issue.

    const tagsInput = screen.getByLabelText(/tags/i, {});
    userEvent.type(tagsInput, fakePost.tags.join(','))

    const submitButton = screen.getByText(/submit/i, {});

    userEvent.click(submitButton);

    expect(submitButton).toBeDisabled();
    expect(mockSavePost).toHaveBeenCalledWith(fakePost)
    expect(mockSavePost).toHaveBeenCalledTimes(1);
})

Component

import React from 'react';
import {savePost} from './api';

function Editor() {
    const [isSaving, setIsSaving] = React.useState(false);

    function handleSubmit(e) {
        e.preventDefault();
        const {title, content, tags} = e.target.elements;
        setIsSaving(true);
        savePost({
            title: title.value,
            content: content.value,
            tags: tags.value.split(',').map(t => t.trim())
        });
    }

    return (
        <form onSubmit={handleSubmit}>
            <label htmlFor="title-input">Title</label>
            <input id="title-input" name="title" />

            <label htmlFor="content-input">Content</label>
            <textarea id="content-input" name="content" />

            <label htmlFor="tags-input">Tags</label>
            <input id="tags-input" name="tags" />

            <button type="submit" disabled={isSaving}>Submit</button>
        </form>
    );
}

export {Editor}

What you did:
I used userEvent to type into a text area the text: 'Test Content' in line: userEvent.type(contentInput, fakePost.content);

What happened:
Instead of userEvent typing in: 'Test Content', it typed in: "est ContentT"

Error Message:

- Expected
+ Received

@@ -1,7 +1,7 @@
  Object {
-   "content": "Test Content",
+   "content": "est ContentT",
    "tags": Array [
      "tag1",
      "tag2",
    ],
    "title": "Test Title",,

Problem description:
It should type into the text area the correct value (i.e. 'Test Content'). As far as I am concerned, this only happened to the textarea input, and not the other inputs.

[ph-fritsche]

Could not reproduce:
https://codesandbox.io/s/userevent-pr-template-forked-8pjet?file=/src/App.js