ArrowDown / ArrowUp events in "number" input fields do not trigger onChange

[ericnicolaas]

Reproduction example

https://codesandbox.io/s/eloquent-tristan-ixhpuv?file=/src/number.test.js

Prerequisites

1. Create a Number component with an onChange handler that calls back to the container.
2. Create a test where Number component is rendered with an onChange func created with jest.fn(). Use userEvent to click into the field and then simulate a down-arrow keyboard press.

For example:

test('the value can be changed with arrow up & down', async () => {
    const initialValue = '7';
    const minValue = '5';
    const onChange = jest.fn();

    render(<NumberField label={LABEL} value={initialValue} onChange={onChange} min={minValue} />);

    const input = screen.getByRole('spinbutton');

    await userEvent.click(input);
    await userEvent.keyboard('{arrowdown}');
    expect(onChange).toBeCalledWith('6');
})

Expected behavior

Expected behaviour is for the test to pass. Pressing the down arrow in a browser would cause the number value to reduce by 1 (assuming step=1).

Actual behavior

Upon running the tests, the test fails with the following result:

expect(jest.fn()).toBeCalledWith(...expected)

    Expected: "6"

    Number of calls: 0

    > 64 |              expect(onChange).toBeCalledWith('6');
         |                               ^
      65 |      });
      66 | });

User-event version

14.4.3

Environment

Testing Library framework: @testing-library/react@13.4.0 JS framework: react@18.2.0 Test environment: jest@27.5.1 DOM implementation: jsdom@16.7.0

Additional context

No response

[TheSonOfThomp]

This doesn't work with userEvent.type either with userEvent 13.5.0

const input = screen.getByRole('spinbutton');
await userEvent.type(input, '{arrowdown}');
expect(onChange).toBeCalledWith('6');

[eliuAtFanatics]

I tried something similar to above, and this is still not working with userEvent 14.5.2