userEvent.type does not replace selected input value

• @testing-library/user-event version: 10.4.0
• Testing Framework and version: jest 24.9.0
• DOM Environment: jsdom 14.1.0, 16.2.2

Relevant code or config

test('click, auto-focus, type-to-replace', async () => {
  render(<InputThatSelectsOwnValueOnFocus initialValue="whatever" />);
  const input = screen.getByLabelText(/input/i);

  input.focus();
  await user.type(input, 'works'); // should replace selected text

  expect(input).toHaveValue('works'); // but it doesn't, it appends
});

Expected the element to have value:
  works
Received:
  whateverworks

What you did:

I’m trying to test behavior of an input that automatically selects its contents on focus (so the user can immediately start typing to replace the value, rather than having to clear it manually).

What happened:

Typing after focusing the input is appending to the value rather than replacing it (while actual behavior is working as intended).

Reproduction repository:

https://codesandbox.io/s/user-event-type-to-replace-issue-9wu97?file=/src/__tests__/App.test.js

Note: it’s unclear if CSB is properly using jest-environment-jsdom-sixteen, but the error is the same locally for jsdom v14 and v16.

Problem description:

Calling input.focus() on an “auto-select-value-on-focus” input followed by await userEvent.type(input, 'whatever') just appends whatever to the existing input value rather than replacing it.

Suggested solution:

Not sure. Is this just a slightly different manifestation of #236?

[kentcdodds]

🎉 This issue has been resolved in version 11.1.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀

[kentcdodds]

Sorry about that!

Luckily, changing code is the easy part, knowing what needs to be changed is the challenging part.