question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Input "selectionStart" is not used in `userEvent.type(input, "abc")`

See original GitHub issue

As mentioned in title changing selectionStart has no effect when using userEvent.type(input, "foobar"), eg:

test("selectionStart is not used when updating input", async () => {
  const { getByTestId } = render(<App />);
  await waitForElement(() => getByTestId("testinput"));

  const input = getByTestId("testinput");
  expect(input).not.toBeNull();
  expect(input.value).toBe("xyz");

  // move cursor to the beginning of input
  input.focus();
  input.setSelectionRange(0, 0);
  expect(input.selectionStart).toBe(0);
  expect(input.selectionEnd).toBe(0);

  // start typing
  await userEvent.type(input, "abc");

  expect(input.value).toBe("abcxyz"); // <-- FAILS
  expect(input.selectionStart).toBe(3);
});

Important: in the test case I use react-scripts test --env=jsdom-sixteen as jsdom had fixed selectionStart only recently https://github.com/jsdom/jsdom/issues/2787

Test case on codesandbox: Edit Input selectionStart test

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:13 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
kentcdoddscommented, Jun 8, 2020

This is now supported 😃

1reaction
weyertcommented, Mar 28, 2020

Hmm, I just wished you could just sent the letter to jsdom and let it append it to the value but that doesn’t seem possible. I am wondering how an actual browser deals with this though. How regarding the event flows? Does it call setRangeText somehow? Anyways I have been lately working on a new version of type() but would be great to have this sorted before this new version.

Read more comments on GitHub >

github_iconTop Results From Across the Web

selectionStart/selectionEnd on input type="number" no longer ...
I have found a simple workaround (tested on Chrome) for setSelectionRange() . You can simply change the type to text before you use...
Read more >
Diff - devtools/devtools-frontend - Google Git
Fix two regressions with CodeMirror 6 - Fix text selection matches not showing up when double clicking words. This makes use of the ......
Read more >
Deliverable 5.1 Language Modelling, Dialogue and User ...
the activity of modeling the expected voice input from the users on the basis of a large base of data collected by potential...
Read more >
Eloquent JavaScript
the binding prompt holds a function that shows a little dialog box asking for user input. It is used like this: prompt("Enter passcode");....
Read more >
Index - Archive of obsolete content
# Page Tags and summary 1 Archive of obsolete content Archive, Landing 1 Archive of obsolete content 3 2015 MDN Fellowship Program 2015, Archive, fellowship
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found