change value of number input when pressing arrow up or down

[Haberkamp]

What

With this change you can change the value of a number input by pressing the ArrowUp and ArrowDown key, like so:

await userEvent.type(screen.getByRole('spinbutton'), "{ArrowUp}");

Why

In browsers users are able to increment or decrement the value of a number input when pressing the up or down arrow key.

Adding this to userEvent closes the gap between this package and the browsers.

How

Checks if the input field has a min or max value defined, yes then the value cannot exceed those boundaries. If not the user can increment or decrement the value indefinitely.

If the input field has a step property then it increments or decrements in those steps.

Checklist

• [N/A] Documentation
• Tests
• Ready to be merged

Resolves #1066

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[greypants]

Thanks for getting this started! I ran into the same thing today.

I think you're missing handling empty values. Add that, and this would be great to have added!

[greypants]

What if value is empty? Number(value) will be NaN

[greypants]

in that case I think value should be treated as "zero" (seems like that's what browsers do)

[greypants]

same here... need to handle an empty value and bump to zero or the min value? or maybe max?

[snowystinger]

Found a failing test

test("increments number input's value by the defined steps when pressing the arrow up key with offset", () => {
  const {element} = render<HTMLInputElement>(
    `<input min="5" type="number" step="10"/>`,
  )

  const instance = setupInstance()

  instance.dispatchUIEvent(element, 'keydown', {key: 'ArrowUp'})

  expect(element).toHaveValue(5)

  instance.dispatchUIEvent(element, 'keydown', {key: 'ArrowUp'})

  expect(element).toHaveValue(15)
})

here's the algorithm we need to implement https://html.spec.whatwg.org/#dom-input-stepup

We should also have a test that shows we don't change the value if preventDefault is called