diff --git a/ui/v2.5/src/utils/form.tsx b/ui/v2.5/src/utils/form.tsx index 93b46bae4..40fedc7bf 100644 --- a/ui/v2.5/src/utils/form.tsx +++ b/ui/v2.5/src/utils/form.tsx @@ -1,10 +1,12 @@ import { faTrashAlt } from "@fortawesome/free-solid-svg-icons"; import { FormikValues, useFormik } from "formik"; +import React, { InputHTMLAttributes, useEffect, useRef } from "react"; import { Button, Col, ColProps, Form, + FormControlProps, FormLabelProps, Row, } from "react-bootstrap"; @@ -41,6 +43,42 @@ export function renderLabel(options: { ); } +// useStopWheelScroll is a hook to provide a workaround for a bug in React/Chrome. +// If a number field is focused and the mouse pointer is over the field, then scrolling +// the mouse wheel will change the field value _and_ scroll the window. +// This hook prevents the propagation that causes the window to scroll. +export function useStopWheelScroll(ref: React.RefObject) { + useEffect(() => { + const { current } = ref; + + function stopWheelScroll(e: WheelEvent) { + if (current) { + e.stopPropagation(); + } + } + + if (current) { + current.addEventListener("wheel", stopWheelScroll); + } + + return () => { + if (current) { + current.removeEventListener("wheel", stopWheelScroll); + } + }; + }, [ref]); +} + +const InputField: React.FC< + InputHTMLAttributes & FormControlProps +> = (props) => { + const inputRef = useRef(null); + + useStopWheelScroll(inputRef); + + return ; +}; + type Formik = ReturnType>; interface IProps { @@ -98,7 +136,7 @@ export function formikUtils( ); } else { control = ( -