Step in sp-number-field does not affect scrolling

[davidkudera]

Expected Behaviour

When using scroll wheel within focused <sp-number-field> the number should change by the configured step value.

Actual Behaviour

It goes always up/down by 100.

Platform and Version

• @spectrum-web-components/bundle: 0.21.2
• Windows 10
• Chrome 91.0.4472.77

Sample Code that illustrates the problem

<sp-number-field step="1"></sp-number-field>

Should behave similarly to:

<input type="number" step="1">

[Westbrook]

@davidkudera thanks for submitting. I'm fairly certain this is due to differences in mouse settings, but I am no able to test (no mouse 🙈 ). Would you be able to visit https://westbrook-numberfield-wheel-step--spectrum-web-components.netlify.app/components/number-field and let me know if this performs more how you would expect in this context? If that's so, hopefully we can have this out in a release next week sometime.

Thanks so much! 🙏🏼

[bengfarrell]

@Westbrook Howdy, I'm actually looking at this myself now. I was considering adding a shift modifier key to the wheel event, but with this issue in mind, it doesn't really make sense.

The action uses the event.deltaY property as a multiplier of the step. And it looks like pixel based values are getting returned which can result in HUGE increments if you naturally scroll a bit aggressively.

Would you prefer I take a stab at doing something a bit more naturally in my shift modifier PR as well as apply the shift modifier to it as well?

My take on it would be just to do it event based a step at a time, ignoring the delta values form the mouse

[davidkudera]

@Westbrook Hello, your example works better for me. Value is updated by 1 which is how the native input works when no custom step is defined.

But, there is another problem I mentioned here (#1509) - scrolling goes in opposite direction compared to native input.

I prepared a new example - https://webcomponents.dev/edit/i9wbtQ3zlhqGQBDZk7oi/src/index.ts

Behavior when I use "scroll wheel direction - traditional":

• sp-number-field:
  • scrolling up: decrease value
  • scrolling down: increase value
• input type=number:
  • scrolling up: increase value
  • scrolling down: decrease value

And when I use "scroll wheel direction - inverted":

• sp-number-field:
  • scrolling up: increase value
  • scrolling down: decrease value
• input type=number:
  • scrolling up: decrease value
  • scrolling down: increase value

So no matter the settings I use, the direction is always opposite to native behavior. Maybe I should create a new issue for that?

[Westbrook]

@bengfarrell scrolling step wise based on direction vs magnitude make sense to me and is what makes this demo work and in westbrook/numberfield-wheel-step.

If you wanted to adopt this into #1534 that sounds great. I see that having a clearer path into main that say #1535, so joining the two ideas shouldn't block getting this update released.