Selection issue with .type()

[wKovacs64]

Reproduction example

https://codesandbox.io/s/testing-lib-user-event-897-4q5egq?file=/src/App.test.js

Prerequisites

1. Render an input that automatically selects its own value on focus
2. .type() in the input (with the default skipClick: false)
3. Observe selection is correct in the browser, but incorrect in tests (which passed in v13)

Expected behavior

I expected calling await user.type(input, text) would result in a focused input (due to the implied click in the default usage where skipClick is false), which in turn would result in the value of the input being selected (input.selectionStart = 0, input.selectionEnd = input.value.length). This is what happens in the DOM, but now fails in tests (as of @testing-library/user-event v14).

Actual behavior

input.selectionStart is set to input.value.length (unexpected) and input.selectionEnd is set to input.value.length (expected).

User-event version

14.0.3

Environment

Testing Library framework: @testing-library/react@14.0.3

JS framework: react@18.0.0

Test environment: jest@27.5.1

DOM implementation: jsdom@16.6.0

Additional context

Similar to #894

[ph-fritsche]

Thanks for the report.

The user.click() in user.type() changes the programmatic selection and UI selection.
We didn't handle calls to element.select() so that the UI Selection remained unchanged while the programmatic selection was changed. The user.keyboard() in user.type() subsequently acted on the UI selection.

Note that the browser collapses any selection on input.

  // Expected: 0, Received: 7
  expect(input.selectionStart).toBe(0); // Actually `2` is expected
  expect(input.selectionEnd).toBe(input.value.length);

[github-actions]

🎉 This issue has been resolved in version 14.0.4 🎉

The release is available on:

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

Your semantic-release bot 📦🚀