[Feature Request]: Provide an easy way to disable wheel events in NumberInput

[caasi]

Summary

If I want to disable wheel events in NumberInput, I have to add an event listener manually.

Could we have an easier way to disable wheel events in NumberInput?

function MyNumberInput = () => {
  return (
    <NumberInput
      {...rest}
      ref={inputRef}
      onFocus={() => {
        if (inputRef.current) {
          inputRef.current.addEventListener("wheel", disableWheel);
        }
      }}
      onBlur={() => {
        if (inputRef.current) {
          inputRef.current.removeEventListener("wheel", disableWheel);
        }
      }}
    />
  );
};

/**
 * It prevents any wheel event from emitting.
 *
 * We want to prevent this input field from changing by the user accidentally
 * when the user scrolling up or down in a long form. So we prevent the default
 * behavior of wheel events when it is focused.
 *
 * Because React uses passive event handler by default, we can't just call
 * `preventDefault` in the `onWheel` event handler. So we have to get the input
 * ref and add our event handler manually.
 *
 * @see https://github.com/facebook/react/pull/19654
 * @param {WheelEvent} e A wheel event.
 */
function disableWheel(e) {
  e.preventDefault();
}

Justification

When user editing a long form with a number input field, it is very easy to change the number input accidentally. User complains about saving the wrong value multiple times.

Desired UX and success metrics

No response

Required functionality

No response

Specific timeline issues / requests

No response

Your team

@Superbil

Available extra resources

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

Code of Conduct

• I agree to follow this project's Code of Conduct

[tay1orjones]

Yeah, due to React not supporting passive event listeners, facebook/react#6436, this has frustrating ergonomics having to apply the handler to the ref like this

I think this could be baked into the component behind a new disableWheel prop.

It's important to point out your example is correct - the handler should be added only on focus, and removed on blur.

I'll add it to our backlog. It's unlikely we'll be able to tackle this anytime soon, but would gladly accept a PR if you're up for submitting this change @caasi 🙏

[caasi]

@tay1orjones Thank you. And thanks to Scotty H on Stack Overflow for providing his jQuery solution.

I can't promise to issue a PR right now. So it's OK to me to leave this open.

[mgueyraud]

Hi guys!, I've created a PR for this issue (#12358), let me know if the approach is good!.