userEvent.type with selection range behaves unexpectedly when run in a browser

[sydneyjodon-wk]

Hello again 👋 I’m seeing inconsistent behavior with userEvent.type being run in the test vs. in the browser outside of the test. For some reason, the typing with selection range example from the docs works in the JS test runner, but doesn't work in the actual browser.

• @testing-library/user-event version: 13.1.8
• @testing-library/react version: 11.2.5

Relevant code or config

import React from “react”;
import { render, screen } from “@testing-library/react”;
import userEvent from “@testing-library/user-event”;

render(
  <div>
    <label htmlFor=“my-input”>Example:</label>
    <input id=“my-input” type=“text” defaultValue=“This is a bad example” />
  </div>
);
const input = screen.getByLabelText(/example/i);
input.setSelectionRange(10, 13);
userEvent.type(input, “good”);

What I did:
I took the userEvent.type with selection range example from the docs and ran it in a js file outside a test.

What happened:
The resulting input value was supposed to be "this is a good example", but instead it was "doothis is a g example":

Reproduction repository:

Sandbox link

Suggested solution:
Based on stepping through the debugger, I think the issue is related to these lines in setSelectionRange. It seems like selection.addRange(range) might not be working as expected so then selection range is cleared to zero after selection.removeAllRanges(). I'm not sure how to solve this though.

[ph-fritsche]

Thanks a lot for the report. ❤️

It looks like our implementation is based on a false premise.
If you select inside the input, the browser sets the selection on the parent <div>.

When you type into the input, the selection range is not changed at all.

https://codesandbox.io/s/rtl-selection-range-example-forked-221xl?file=/src/App.js

We should skip setting the range on Selection for <input> and <textarea>.

[gweax]

I stumbled upon this error as well. One thing to notice is that userEvent.clear() only removes the first character instead of the whole value. I assume this is related.

[gweax]

Oh, I see this is already mentioned in #645

[sydneyjodon-wk]

I think that is related. I also noticed that special characters like {selectall} and {arrowLeft} don't work as expected, which could be why userEvent.clear() doesn't work since it uses {selectall}.

[sydneyjodon-wk]

@ph-fritsche I made a PR with what you suggested and it looks like that fixes it! It's ready for review when you have time. Thank you!

[github-actions]

🎉 This issue has been resolved in version 13.1.9 🎉

The release is available on:

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

Your semantic-release bot 📦🚀