Arrow keys with meta keys don't work as expected

• @testing-library/user-event version: 12.2.0
• Testing Framework and version: jest 24.1.0
• DOM Environment: react-dom 16.13.1

Relevant code or config

See reproduction below.

Reproduction repository

https://codesandbox.io/s/smoosh-violet-el3sh?file=/src/index.test.js

Problem description

The library doesn’t seem to support the combination of arrow keys and meta keys within an input. For instance, on Chrome, Firefox and Safari, when the cursor is at the end of the text value and you press Alt + ArrowLeft, it jumps back one word. When you press Meta + ArrowLeft, it jumps back the entire value and sets the cursor at the beginning. Same goes with ArrowRight, in the opposite direction.

For example, if I type “hello world” then hit Alt + ArrowLeft, my cursor should be right before “there” (index 6). If I hit Meta + ArrowLeft, it should be right before “hello” (index 0).

You can try this in the Browser tab.

However, the test using userEvent.type with {alt} or {meta} don’t pass (see Tests tab). It also doesn’t work with fireEvent.keyDown, but interestingly, the output is different (see failing tests).

I don’t know if these combinations are considered standard, but they do work out of the box on the major browsers, so it might be interesting to implement them.

[nickmccurdy]

It may be easier to use something like this:

userEvent.type(`hello there${"{arrowleft}".repeat(5)}{backspace}`)

[sarahdayan]

Totally understand that this is non-standard behavior, and doesn’t belong in the library.

@nickmccurdy In the example I gave, the way to circumvent it is to actually move the cursor manually, either by hitting ArrowLeft the right number of times (e.g., "hello there{arrowleft}{arrowleft}{arrowleft}{arrowleft}{arrowleft}{backspace}") or by setting the cursor with HTMLInputElement.setSelectionRange and triggering a click event.

Closing it, thanks for the discussion!