User-event: `type` regression if textarea has no value before typing

[loekup]

• @testing-library/user-event version:
• Testing Framework and version: 11.4.2
  
• DOM Environment:
  [email protected]
  @testing-library/[email protected]
  @testing-library/[email protected]
  

Relevant code or config

test(" empty textarea", async () => {
  render(<textarea data-testid="textbox" />);

  await userEvent.type(screen.getByTestId("textbox"), "1234");
  expect(screen.getByRole("textbox")).toHaveValue("1234");
});

What you did:

Updated from 11.2.1 to 11.4.2

What happened:

library code types incorrectly if the textarea has no value when it start typing

Reproduction repository:
https://codesandbox.io/s/user-event-type-to-add-text-issue-exgpf?file=/src/__tests__/App.test.js

Problem description:

It seems like the "type" event returns to the beginning of the line after it has typed the first letter, after that it returns to normal resulting in the first letter always being at the end of the word/sentence

[bmerkle3]

I'm following this issue as we encountered the same.

if we expected to get the following input: "Entering a note."
we are currently receiving: "ntering a note.E"

[kentcdodds]

Thanks for the report you two. I'll get this fixed soon. Doing a bunch of work on user-event right now.

[kentcdodds]

If I download the codesandbox locally, it passes 🤔

[loekup]

Did some further testing, the problem lies in 'jest-environment-jsdom-sixteen' in my own project i was running 'jest-environment-jsdom-global' and apparently the codesandbox online runner ignores the --env in the package scripts

[mpgon]

I don't think it's related, but the newly typed value doesn't show in the rendered markup. Shouldn't it?

test(" empty textarea", async () => {
  const { debug } = render(<textarea data-testid="textbox" defaultValue="" />);


  debug(); // "" in textarea
  await userEvent.type(screen.getByTestId("textbox"), "1234");
  expect(screen.getByRole("textbox")).toHaveValue("2341"); // the other bug
  debug(); // still shows "" instead of "2341"
});

[kentcdodds]

I don't know. I'd have to look into it. You can if you like 😁

[twdrake-ap]

Yeah type is busted for me as well. Not modifying the input at all.

[kentcdodds]

:tada: This issue has been resolved in version 12.0.4 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[mpgon]

The codesandbox repro case above is still failing for me for versions 12.0.4/5/6

[marcosvega91]

The problem here is that before typing selectionStart and selectionEnd are undefined. I think that can be a problem of jsdom instead.

[nickmccurdy]

If anyone still has this issue, I think I've tracked it down in https://github.com/testing-library/user-event/issues/391#issuecomment-656444436, and you can subscribe to #391 for updates

[dave-cabbage]

I'm using the latest version of user-event but I still kept getting this issue, so I had to resort to setting a selection text before typing. That seemed to work

[ph-fritsche]

@dave-cabbage The reproduction example of this issue works as expected with up-to-date dependencies:
https://codesandbox.io/s/user-event-type-to-add-text-issue-forked-dezvq?file=/src/__tests__/App.test.js

Are you by chance using an old version of jsdom?

If your problem does not resolve by updating the dependencies on your project, please file a new issue with a reproduction example like above. :)

[dave-cabbage]

Yes @ph-fritsche, I'm using jsdom 15 with jest-environment-jsdom-fifteen. I had to downgrade to this from 16 because my CRA didn't play well with jsdom 16.
Anyways, I'll have to refactor this in the future and I'll check again, but until then, selecting the text works for me.