-
Notifications
You must be signed in to change notification settings - Fork 252
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
base: main
Are you sure you want to change the base?
change value of number input when pressing arrow up or down #1272
Conversation
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. |
ff2ee1c
to
391485b
Compare
391485b
to
c39d029
Compare
There was a problem hiding this 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) |
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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) |
There was a problem hiding this comment.
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?
What
With this change you can change the value of a number input by pressing the
ArrowUp
andArrowDown
key, like so: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
ormax
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
Resolves #1066