Skip to content

change value of number input when pressing arrow up or down #1272

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

Haberkamp
Copy link

@Haberkamp Haberkamp commented Feb 6, 2025

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

Copy link

codesandbox-ci bot commented Feb 6, 2025

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.

@Haberkamp Haberkamp force-pushed the pr/change-value-of-number-input-when-pressing-arrow-up-or-down branch from ff2ee1c to 391485b Compare February 8, 2025 07:57
@Haberkamp Haberkamp force-pushed the pr/change-value-of-number-input-when-pressing-arrow-up-or-down branch from 391485b to c39d029 Compare February 8, 2025 08:22
Copy link

@greypants greypants left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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!


const reachedMax = value === node.max
if (inputData === 'ArrowUp' && !reachedMax) {
const exceedsMax = Number(value) + step > Number(node.max)

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


const reachedMin = value === node.min
if (inputData === 'ArrowDown' && !reachedMin) {
const exceedsMin = Number(value) - step < Number(node.min)

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

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