Skip to content

Conversation

devongovett
Copy link
Member

@devongovett devongovett commented Jan 27, 2021

Closes #1486

  • Fixes double borders between input and buttons
  • Fixes disabled focus and hover states for stepper buttons
  • Updates the increment/decrement button disabled states as you type rather than on blur
  • Adjusts the behavior of the step prop to match slider, and native number input behavior more closely
  • Disables the stepper buttons when adding the step value would be greater than the min/max rather than only if the current value is already outside the valid range.
  • Simplify aria-roledescription text

Step behavior details

  • If there is a defined minimum, steps are calculated starting from the min and going upwards. For example, with minValue={2} and step={3}, the steps would be 2, 5, 8, etc.
  • If there is no defined minimum, steps are calculated starting from zero, going in both directions. In other words, values are divisible by the step. For example, with step={3}, valid values would be -6, -3, 0, 3, 6, etc.
  • When incrementing or decrementing starting from a typed value, the value changes to the nearest valid step value in the direction of travel.
  • When incrementing starting from an empty field, and there is a defined minimum value, the value of the field becomes the minimum. This is an intentional deviation from native <input type="number"> behavior, which seems to always try to start from zero even if zero is out of range.
  • When decrementing starting from an empty field, and there is a defined maximum value, the value of the field becomes the maximum. This is an intentional deviation from native <input type="number"> behavior, which seems to always try to start from zero even if zero is out of range.
  • When incrementing or decrementing starting from an empty field, and there is no defined minimum/maximum value, the value of the field becomes 0. This is an intentional deviation from native <input type="number"> behavior, which starts from zero but also increments/decrements, so really starts at 1 or -1.
  • When committing a typed input value, if there is no step defined, we simply clamp to the min/max if any. Otherwise, we find the nearest step value.

@adobe-bot
Copy link

Build successful! 🎉

@adobe-bot
Copy link

Build successful! 🎉

Copy link
Member

@snowystinger snowystinger left a comment

Choose a reason for hiding this comment

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

Generally I like the direction of the changes.

I think there's still a subtle difference between native and this
try pressing up arrow on <input type="number" min="-5" step="3"/>, it starts at 1
so I think the extra rule is
When the min is less than zero, start the increment from 0 but advance to the next valid step with min as our starting point.
Here's the fiddle I used to check them all, two of each line so I could easily hit both up and down without reloading https://jsfiddle.net/snowystinger/4ctejfLd/14/
The other one I cannot figure out is <input type="number" min="-5" step="3"/> which starts at -6 if you hit increment, but starts at -5 if you decrement.

Thanks, missed it in the description

That said, I don't know how important it is?

@devongovett
Copy link
Member Author

Yes. See the PR description. These were intentional deviations.

@adobe-bot
Copy link

Build successful! 🎉

@adobe-bot
Copy link

Build successful! 🎉

@adobe-bot
Copy link

Build successful! 🎉

@adobe-bot
Copy link

Build successful! 🎉

@adobe-bot
Copy link

Build successful! 🎉

@adobe-bot
Copy link

Build successful! 🎉

@adobe-bot
Copy link

Build successful! 🎉

e.g. latin decimal point in arabic
@adobe-bot
Copy link

Build successful! 🎉

@adobe-bot
Copy link

Build successful! 🎉

@adobe-bot
Copy link

Build successful! 🎉

@devongovett devongovett marked this pull request as ready for review January 29, 2021 00:38
@devongovett devongovett requested a review from dannify as a code owner January 29, 2021 00:38
@adobe-bot
Copy link

Build successful! 🎉

@adobe-bot
Copy link

Build successful! 🎉

@adobe-bot
Copy link

Build successful! 🎉

@adobe-bot
Copy link

Build successful! 🎉

@dannify dannify merged commit 37273c5 into main Feb 1, 2021
@dannify dannify deleted the numberfield-fixes branch February 1, 2021 17:33
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.

Numberfield further work
5 participants