ArrowUp / ArrowDown should fire onInput for input[type="range"]

[ChristopherChudzicki]

Reproduction example

https://codesandbox.io/s/magical-hoover-80m7jv?file=/src/range.test.tsx

Prerequisites

1. Render an input[type="range"] element with an onInput handler (onChange for react applications)
2. Focus the input element
3. Call user.keyboard('{ArrowRight}'

See codesandbox link or https://github.com/ChristopherChudzicki/range-input-arrowkeys/blob/main/src/range.test.tsx

Expected behavior

The input handler should be called.

Actual behavior

The input handler is not called.

User-event version

14.4.3

Environment

Testing Library framework:

JS framework:

Test environment:

DOM implementation:

Additional context

Per #843, I think this is an issue in @testing-library/user-event not JSDOM. #1066 is the analogous issue for numeric inputs.

IMO, resolving this issue would be of significant value since other methods of manipulating the range input (e.g., mouse movement) are harder to implement in some testing environments like JSDOM.

If this is a @testing-library/user-event issue, I'd be happy to try and implement it if someone can point me in the right direction.

[ph-fritsche]

Thanks for opening this issue. Behavior for <input type="range"/> is not implemented yet. See #871