How to disable mouse wheel scrolling over a type "number" input in React?

Question

I'm using MUI type="number" textfields, but when I focus it and then scroll the mousewheel, the value of the input changes. I've read about adding blur after scroll, but I don't want to blur the field.

I've read too about adding blur and focus again, but the behaviour isn't good enough.

Could somebody help me? Thanks a lot! :)

I'm using React v18 & MUI v5.

To reproduce this behaviour, you can go to https://mui.com/material-ui/react-text-field/, click in a type number textfield, and then scroll OVER the field. You will see how the value changes.

I've tried using blur and focus, but this behaviour is not good enough

Answer 1

I had this issue with SurveyJS, here are 2 ways to solve it below!

const scrollableElements = 
 document.querySelectorAll('input[type="number"]');
    scrollableElements.forEach((item: HTMLElement) => {
      item.addEventListener("wheel", (e: any) => {
    e.preventDefault();
    return false;
  });
 });

const scrollableElements = 
 document.querySelectorAll('input[type="number"]');
 scrollableElements.forEach((item: HTMLElement) => {
  item.setAttribute("onwheel", "return false");
 });