Merge pull request #57 from EyeSeeTea/feature/mouse-behaviour-8695cdy10

disable mouse behaviour for input number
EyeSeeTea · Sep 19, 2024 · 44d1255 · 44d1255
2 parents b6005c6 + 7c8ffa4
commit 44d1255
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/src/webapp/reports/autogenerated-forms/AutogeneratedForm.tsx b/src/webapp/reports/autogenerated-forms/AutogeneratedForm.tsx
@@ -174,6 +174,22 @@ function useDataFormInfo(): [
         style.setAttribute("id", "disabled-arrows-css");
         style.appendChild(document.createTextNode(css));
         head.appendChild(style);
+
+        function disableScrollInputs() {
+            if (
+                window.document.activeElement instanceof HTMLInputElement &&
+                window.document.activeElement.type === "number" &&
+                window.document.activeElement.classList.contains("noscroll")
+            ) {
+                window.document.activeElement.blur();
+            }
+        }
+
+        document.addEventListener("wheel", disableScrollInputs);
+
+        return () => {
+            document.removeEventListener("wheel", disableScrollInputs);
+        };
     }, []);
 
     useEffect(() => {

diff --git a/src/webapp/reports/autogenerated-forms/widgets/NumberWidget.tsx b/src/webapp/reports/autogenerated-forms/widgets/NumberWidget.tsx
@@ -22,6 +22,12 @@ const NumberWidget: React.FC<NumberWidgetProps> = props => {
         [onValueChange, dataValue]
     );
 
+    const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+            e.preventDefault();
+        }
+    };
+
     return (
         <WidgetFeedback state={props.state}>
             {disabled ? (
@@ -36,6 +42,8 @@ const NumberWidget: React.FC<NumberWidgetProps> = props => {
                     type="number"
                     onBlur={e => notifyChange({ value: e.target.value })}
                     defaultValue={dataValue.value}
+                    onKeyDown={onKeyDown}
+                    className="noscroll"
                 />
             )}
         </WidgetFeedback>