Prevented scrolling on input[type=number] fields

Author: josephmathew900

src/components/Input/index.jsx

@@ -90,6 +90,10 @@ const Input = forwardRef(
       onBlur?.(e);
     };
 
+    const handleOnWheel = e => {
+      if (type === "number") e.target.blur();
+    };
+
     const dataCyLabel =
       typeof label === "string" ? hyphenize(label) : hyphenize(dataCy);
 
@@ -148,6 +152,7 @@ const Input = forwardRef(
             }}
             onBlur={handleOnBlur}
             onChange={handleChange}
+            onWheel={handleOnWheel}
           />
           {suffix && <div className="neeto-ui-input__suffix">{suffix}</div>}
         </div>

tests/Input.test.jsx

@@ -197,4 +197,32 @@ describe("Input", () => {
     rerender(<Input label="label" value={45.677} />);
     expect(input).toHaveValue("45.677");
   });
+
+  it("should prevent wheel scrolling on number input fields", () => {
+    const { getByLabelText } = render(
+      <Input label="Number Input" type="number" />
+    );
+    const input = getByLabelText("Number Input");
+
+    const wheelEvent = new Event("wheel", { bubbles: true });
+    const blurSpy = jest.spyOn(input, "blur");
+
+    input.dispatchEvent(wheelEvent);
+
+    expect(blurSpy).toHaveBeenCalled();
+    blurSpy.mockRestore();
+  });
+
+  it("should not prevent wheel scrolling on non-number input fields", () => {
+    const { getByLabelText } = render(<Input label="Text Input" type="text" />);
+    const input = getByLabelText("Text Input");
+
+    const wheelEvent = new WheelEvent("wheel", { deltaY: 1 });
+    const blurSpy = jest.spyOn(input, "blur");
+
+    input.dispatchEvent(wheelEvent);
+
+    expect(blurSpy).not.toHaveBeenCalled();
+    blurSpy.mockRestore();
+  });
 });