Add mouse wheel support in NumericTextBox

[JaapMosselman]

I'm submitting a...

• Suggestion for improvement

Current behavior

When the NumericTextBox is focused you can use arrow up and down to increment or decrement. But the mouse wheel does not work. The date-inputs supports this, so now there is no consistent user input experience.

Expected behavior

Scrolling with mouse wheel should increment or decrement just like the arrow up and down key.

Minimal reproduction of the problem with instructions

Standard demo example.

What is the motivation or use case for changing the behavior?

Consistent user input experience.

[ggkrustev]

Everyone interested in this feature, please cast your vote for it in our UserVoice portal:

http://kendoui-feedback.telerik.com/forums/555517-kendo-ui-for-angular-feedback/suggestions/31209100-enable-mousewheel-scrolling-in-numerictextbox

[JaapMosselman]

I already implemented this feature in a local copy of the source code. I you are interested to see the changes I did, let me know...

[tsvetomir]

Closing the issue to avoid duplication with UserVoice.

[JaapMosselman]

I found this feature is now implemented in version 4.2.0, which is great because is saves me from maintaining my own version of this package! Thanks.
I see in the code that the this.addStep(-e.deltaY / 100); is used, which seems fine. But the strange thing is e.deltaY seems usually have a value of 120, so the parameter will be 1.2. And when the component has a Step property value of 1, you get the ugly behavior that the value is incremented by 1.2 instead of steps of 1.
My suggestion would be that the parameter supplied to addStep should always be a multiple of 1 (or 1 itself).
My own implementation was just this this.addStep((event.wheelDelta || -event.detail) > 0 ? 1 : -1);, which doesn't do something with the speed of the mouse.

[dtopalov]

@JaapMosselman Thank you for reporting this problem. It seems to be caused by the fact that there are no cross-browser consistent values for the MouseWheel event data deltaY property. We will do our best to resolve the problem and provide a behavior, consistent between major browsers as soon as possible.

[JaapMosselman]

@dtopalov Yeah, consistency is a problem. So the most basic solution is not using the size of deltaY at all. Just use the direction to supply a step of 1 or -1. I am using that in my own version already more than a year with lots of users. Works just fine. I would not spend time on using the size of deltaY.

[dtopalov]

@JaapMosselman Indeed, the most straight-forward approach is to take the direction only, but we wanted to introduce a solution that will also keep the scroll rate (difference is most significant on touch-input devices like touch pads). Thus we had to refactor, and introduce a cross-browser solution that will be available in the latest dev build of the Inputs package.

[JaapMosselman]

Great.
(Now I would suggest to add this also to dropdowns (perhaps optionally) :-) , so I can get rid of the last custom package. #881)

[danielkaradachki]

Released in 4.2.1

[luizfbicalho]

Is there a way to disable this feature? I can't find anything in the API

[tsvetomir]

No, there is currently no flag to disable the mousewheel behavior. Please open a new feature request to avoid spamming this thread.