From 6e4c6b6356f0d07c79d259c751f29f313c8ca6e9 Mon Sep 17 00:00:00 2001
From: soup <soup@r4tio.dev>
Date: Mon, 10 Apr 2023 14:38:27 +0200
Subject: [PATCH] fix(web): numberfield changing while scrolling (#811)

* fix numberfield changing while scrolling

* added same behaviour to NumberFieldWide
---
 web/src/components/inputs/input.tsx      | 6 ++++++
 web/src/components/inputs/input_wide.tsx | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/web/src/components/inputs/input.tsx b/web/src/components/inputs/input.tsx
index df2de47..a3c8a78 100644
--- a/web/src/components/inputs/input.tsx
+++ b/web/src/components/inputs/input.tsx
@@ -429,6 +429,12 @@ export const NumberField = ({
               }
               form.setFieldValue(field.name, parseInt(event.target.value)); // Convert the input value to an integer using parseInt() to ensure that the backend can properly parse the numberfield as an integer.
             }}
+            onWheel={(event) => {
+              if (event.currentTarget === document.activeElement) {
+                event.currentTarget.blur();
+                setTimeout(() => event.currentTarget.focus(), 0);
+              }
+            }}
           />
           {meta.touched && meta.error && (
             <div className="error">{meta.error}</div>
diff --git a/web/src/components/inputs/input_wide.tsx b/web/src/components/inputs/input_wide.tsx
index 6a1ce42..4e6c69c 100644
--- a/web/src/components/inputs/input_wide.tsx
+++ b/web/src/components/inputs/input_wide.tsx
@@ -187,6 +187,12 @@ export const NumberFieldWide = ({
                 : "focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700",
               "block w-full shadow-sm dark:bg-gray-800 sm:text-sm dark:text-white rounded-md"
             )}
+            onWheel={(event) => {
+              if (event.currentTarget === document.activeElement) {
+                event.currentTarget.blur();
+                setTimeout(() => event.currentTarget.focus(), 0);
+              }
+            }}
             placeholder={placeholder}
           />
         )}