search

ten1seven / what-input

A global utility for tracking the current input method (mouse/pointer, keyboard or touch).
https://ten1seven.github.io/what-input
MIT License
1.35k stars 89 forks source link

Consider not using the wheel event for detecting scroll-position #76

Closed razh closed 6 years ago

razh commented 6 years ago

An unfortunate side-effect of adding a wheel event listener is that it triggers undesirable scrolling behavior for input[type="number"] elements in Chrome and Safari on macOS:

<label for="exampleNumberInput">Example number input</label>
<input type="number" class="form-control" id="exampleNumberInput" name="exampleNumberInput">

2018-02-21-number-input-wheel-events

This only occurs when a wheel event listener is added and it occurs regardless of where in the document it's added. For example, these input[type="number"] events don't have this behavior:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

Currently, the prevailing solution is to blur the input on the mousewheel event, but I would like to keep focus on the element:

https://stackoverflow.com/questions/9712295/disable-scrolling-on-input-type-number

I don't know the full extent of how this behavior affects Windows and Linux.

ten1seven commented 6 years ago

Thanks for the detailed ticket @razh! I'll take a look into this.

razh commented 6 years ago

@ten1seven No worries, we decided to go another route on this that appears to work. I'm aware of at least Firefox on Windows and Linux exhibiting this behavior even without the .addEventListener('wheel').

For future reference, we used jquery-mousewheel to normalize scroll distances and added it to scrollTop in the mousewheel event listener instead of blurring.

Feel free to close this!