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(); + }); });