testing-library / testing-library/user-event

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

Open
#1,066 3 comments 20 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

accuracy enhancement
Dominant language
TypeScript
Stars
2.3k
Forks
258
PR merge metrics
No merged PRs in 30d

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked CodeSandbox reproduction, especially src/number.test.js, and run the test using user-event 14.4.3. Trace the corresponding number-input keyboard handling in user-event and verify that ArrowDown and ArrowUp invoke onChange with the updated value, including the demonstrated expected value of "6".

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
testing-qa
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.