type/keyboard modifier key not working as described in the docs

[fn0rth]

Reproduction example

https://codesandbox.io/s/user-event-modifiers-not-working-78eg54?file=/src/App.test.js

Prerequisites

render(<input />);

const input = screen.getByRole("textbox");

await userEvent.type(input, "{Shift>}a{/Shift}");

expect(input.value).toBe("A");

Expected behavior

Input value should be A (uppercase) if I understand the docs correctly

Actual behavior

Input value is a (lowercase)

User-event version

14.4.3

Environment

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

JS framework: react@18.2.0

Test environment: jest@29.5.0

DOM implementation: jsdom@20.0.3

Additional context

No response

[ph-fritsche]

Currently {Shift>} changes the modifiers (shiftKey: true), but a printable character a is directly matched to the key described by KeyboardEvent.key === 'a' (which of course inserts key: 'a').

We want to provide a more intuitive input in the future and consider modifiers.
But the implementation might be the other way around: {Shift>}a{/Shift} translating to {Shift>}{/Shift}[KeyA], as this would also allow A to translate to {Shift>}[KeyA]{/Shift}

autoModify

We intend to automatically apply modifier keys for printable characters in the future.
I.e. A implying {Shift>}a{/Shift} if caps lock is not active.

[fn0rth]

Thank you for the quick reply! I'm currently trying to find a solution for pressing / in combination with metaKey: true. Is there way to achieve that with userEvent.type or userEvent.keyboard currently?