diff --git a/src/components/Input/index.jsx b/src/components/Input/index.jsx
index 5a536c681..c0530f352 100644
--- a/src/components/Input/index.jsx
+++ b/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 &&
{suffix}
}
diff --git a/tests/Input.test.jsx b/tests/Input.test.jsx
index 4b75d3c57..4ece6c196 100644
--- a/tests/Input.test.jsx
+++ b/tests/Input.test.jsx
@@ -197,4 +197,32 @@ describe("Input", () => {
rerender();
expect(input).toHaveValue("45.677");
});
+
+ it("should prevent wheel scrolling on number input fields", () => {
+ const { getByLabelText } = render(
+
+ );
+ 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();
+ const input = getByLabelText("Text Input");
+
+ const wheelEvent = new Event("wheel", { bubbles: true });
+ const blurSpy = jest.spyOn(input, "blur");
+
+ input.dispatchEvent(wheelEvent);
+
+ expect(blurSpy).not.toHaveBeenCalled();
+ blurSpy.mockRestore();
+ });
});