Typing Backspace multiple times results in wrong cursor position

[JesseCheng77]

Reproduction example

https://codesandbox.io/s/elastic-surf-6qegdh?file=/src/App.test.js

Prerequisites

1. Render <input type="text" />
2. Type abc
3. Press {ArrowLeft}{Backspace}{Backspace}

Expected behavior

input element value should be 'c' and cursor position should be 0

Actual behavior

The input element value is "a" and the cursor position is 1

User-event version

14.4.3

Environment

Testing Library framework:

JS framework:

Test environment:

DOM implementation:

Additional context

No response

[hudochenkov]

I experience similar problem and it boiled down to incorrect behavior with React 17 starting v14.2.6.

Test:

1. Render <input type="text" /> and focus it.
2. Using only keyboard press a, b, e, h
3. Press {ArrowLeft}, {ArrowLeft}
4. Press C, D
5. Press {ArrowRight}
6. Press F, G

Expected input value: abCDeFGh
Received input value: abCehDFG

Codepens:

• React 17, user-event 14.2.5, @testing-library/react 12.1.5 — no issue
• React 17, user-event 14.2.6, @testing-library/react 12.1.5 — issue is present, including v14.4.3
• React 18, user-event 14.4.3, @testing-library/react 13.4.0 — no issue

Most likely this PR caused regression for React 17 in v14.2.6.