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

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.

Start with the linked range.test.tsx reproduction and inspect the keyboard handling and range-input tests in user-event. Compare ArrowRight behavior with the expected input-handler call, then add coverage showing the handler fires for ArrowUp and ArrowDown as well. Confirm the relevant test suite passes and that the reproduction is resolved.