From 7c8ffa4aead0a622c351f299a2180cdc37a6053b Mon Sep 17 00:00:00 2001
From: Eduardo Peredo Rivero <jrperedo@gmail.com>
Date: Mon, 12 Aug 2024 11:06:03 -0500
Subject: [PATCH] disable mouse behaviour for input number

---
 .../autogenerated-forms/AutogeneratedForm.tsx    | 16 ++++++++++++++++
 .../autogenerated-forms/widgets/NumberWidget.tsx |  8 ++++++++
 2 files changed, 24 insertions(+)

diff --git a/src/webapp/reports/autogenerated-forms/AutogeneratedForm.tsx b/src/webapp/reports/autogenerated-forms/AutogeneratedForm.tsx
index 5f02606..88c5e24 100644
--- 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
index 08f3d16..f407a9d 100644
--- 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>