Cannot set the cursor position after programmatically modifying the value of input

[JesseChain]

Reproduction example

https://codesandbox.io/s/serene-lehmann-1fkp6j?file=/src/App.test.js

Prerequisites

None

Expected behavior

The position of the cursor should always be 2 if you enter anything in input

Actual behavior

The cursor position is always reset to the end

User-event version

14.2.0

Environment

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

JS framework: react@16.14.0 react-dom@16.14.0

Test environment: jest@26.0.21 @testing-library/jest-dom@5.11.9

DOM implementation: jsdom@16.4.0

Additional context

No response

[JesseChain]

I think it's caused by this code

user-event/src/document/value.ts

Line 149 in 7b0643b

setCleanValue(element, changes.tracked[changes.tracked.length - 1])

[ph-fritsche]

Thanks for the report.

You're right. This is caused by us reapplying value changes we collected during the input event.

The underlying problem is that react@17 (don't know about earlier versions, in v18 the problem doesn't seem to exist) resets the value on controlled elements before executing the event handlers.
But it does so only in test environment.
Any programmatic change to the value property of an element automatically also sets the selection to value.length.
So while in the browser nothing happens - the selection is moved in the test.

We currently work around this by intercepting all changes to value during the input. But we don't know if a change is caused by React or by the event handler, so after the event handlers are done, we reapply the last change to value if the changes don't match this reset+update pattern.

The useLayoutEffect hook is executed after the event handlers and before our code continues, so the value change that originally happened before the hook is reapplied later.

Maybe there's a smarter workaround doing less harm.

[Kreynux]

I Have the same problem. My code is pretty much the same as shown in the codesandbox provided by dnt1996.
My test looks like this:

it("should keep cursor position when formatting input value", async () => {
    render(<personalIdNumber />)
    const user = userEvent.setup()
    const textBox = screen.getByRole("textbox")
    await user.type(textBox, "9010107777")
    expect(textBox).toHaveValue("90101077-77")
    await userEvent.type(textBox, "19", {
      initialSelectionStart: 0,
      initialSelectionEnd: 0
    })
    expect(textBox).toHaveValue("19901010-7777") // Test fails here
  })

Error console log:
Error: expect(element).toHaveValue(19901010-7777)

Expected the element to have value:
19901010-7777
Received:
19010107-7779

I use the following following environment:
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-scripts": "^5.0.1",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.0.1",
"@testing-library/user-event": "^14.2.0",
"@types/jest": "^27.5.1",

[github-actions]

🎉 This issue has been resolved in version 14.2.6 🎉

The release is available on:

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

Your semantic-release bot 📦🚀

[ph-fritsche]

@all-contributors add @dnt1996 bug

[allcontributors]

@ph-fritsche

@dnt1996 already contributed before to bug