[UX Improvement] Disable mouse wheel behavior on number type inputs

There is annoying behaviour that should not exist IMHO for UX’s sake: when you scroll on an <input type="number"> you can change input when you have the focus on it which is not user-friendly at all since the mouse wheel is almost exclusively used for scrolling page. As a result, people are typing a value, then trying to scroll further for another input and then changing the input value without even noticing for the majority.

I don’t know what is implemented in React that changes how it is handled in most browsers. I have tried to track down the event which is modifying the input without success. But if you try vanilla javascript in, let’s say, Chrome then you don’t have this ugly behaviour. 🤷‍♂️

For illustration purposes:

• React behaviour: https://codesandbox.io/s/silly-feynman-ic8f9p
• Vanilla behaviour: https://codesandbox.io/s/laughing-fog-rkrc6s

Another reference: https://stackoverflow.com/questions/68260072/why-can-we-update-a-value-of-a-number-input-using-mouse-wheel

Can someone explain why and where in the code wheel is changing the input? Or why it is not like that in vanilla JS (for most browsers)?

And maybe deciding to change the default behaviour to something more user-friendly could be discussed?

[vvscode]

I want to mention, that react rendering affects also inputs that are draw outside the React component.

https://codesandbox.io/s/wheel-problem-5nz2b5?file=/src/index.js:110-282

[Jule-]

@vvscode indeed, as exposed in my first codesandbox, but I forgot to mention it clearly. Thanks for mentioning that annoying side effect!