How to Disable Scrolling on HTML Number Input in React

A developer asked a question on StackOverflow with the title “Disable scrolling on `<input type=number>`". He asked:

Is it possible to disable the scroll wheel changing the number in an input number field? I’ve messed with webkit-specific CSS to remove the spinner but I’d like to get rid of this behavior altogether. I like using type=number since it brings up a nice keyboard on iOS.

There were many answers that focused on plain JavaScript solutions, but most frontend developers are using JS frameworks, such as React, these days. With that in mind, I provided the following ReactJS focused solution for preventing scrolling when a user moves their mouse wheel over a number input:

const MyNumberInput = () => {
  const numberInputOnWheelPreventChange = (e) => {
    // Prevent the input value change
    e.target.blur()

    // Prevent the page/container scrolling
    e.stopPropagation()

    // Refocus immediately, on the next tick (after the current     
    function is done)
      setTimeout(() => {
        e.target.focus()
    }, 0)
}

  return <input type="number" onWheel={numberInputOnWheelPreventChange}/>
}

Photo by Catherine Heath on Unsplash

The comments explain how it works exhaustively, so I won’t repeat it here. I hope it’s helpful. If you have questions or other solutions, feel free to comment below.