[TextField] How to prevent mousewheel in input of type number?

Problem description

Scrolling in a number field changes the values. In all the applications I have built so far people have asked me to prevent this behaviour because it sometimes causes corrupted data.

See also https://stackoverflow.com/questions/9712295/disable-scrolling-on-input-type-number/38589039#38589039

Steps to reproduce

Build a TextField of type number. Set focus into it. Scroll with your mousewheel.

Versions

This happens in all browsers in input elements, as far as I know.

Workaround

I have tried this:

document.addEventListener('mousewheel', function(event) {
  if (window.document.activeElement.type === 'number') {
    event.preventDefault()
  }
})

But it only seems to work sometimes. No Idea why it only works inconsistently.

Request

Now I see that changing standard behaviour would not be good. But adding this as an option would be very nice.

[yakubova92]

onWheel={event => event.target.blur()} works, using onWheel={event => event.currentTarget.blur()} does not work

[dennis-gonzales]

onWheel={event => event.target.blur()} works, using onWheel={event => event.currentTarget.blur()} does not work

Works for me, thanks. A little bit of modification for typescript

onWheel={e => e.target instanceof HTMLElement && e.target.blur()}