Why can we update a value of a number input using mouse wheel?

user_3042035 0
Viewed 101

Why is it possible to update the value of a input[type="number"] using the mouse wheel in React but not in pure HTML?

React: https://codesandbox.io/s/festive-morse-l28c7 or https://jsfiddle.net/nm53bavd/

HTML: https://codesandbox.io/s/beautiful-davinci-il8rn?file=/src/index.js

What's the secret? Couldn't find any hint in the react docs or related react issues on github.

I want to get rid of it globally, found some useful stuff like

onWheel={event => event.target.blur()}

But anyway, if this is not documented anywhere (please correct me if i am wrong) and it differs to the current default behavior of HTML should a bug ticket be opened to have this issue fixed in react itself?

reactjs
1 Answers

React DOM elements are cross-browser implementations of HTML elements.

You can find the input implementation in ReactDOMInput.js file.

Therefore the "secret" is behind adding the wheel event implementation.

You can't "get rid of it" globally since you can't edit the DOM elements implementation out of the box.

So, you can write your own custom InputNoWheelEvent component with your desired change:

// InputNoWheelEvent
<input onWheel={event => event.target.blur()} {...inputProps}/>
user_78824700
Related