In number inputs, prevent changing value via scroll wheel

vibecamp · Dec 2, 2023 · f6cbfe6 · f6cbfe6
1 parent 5cef787
commit f6cbfe6
Showing 1 changed file with 15 additions and 1 deletion.
diff --git a/front-end/src/components/core/NumberInput.tsx b/front-end/src/components/core/NumberInput.tsx
@@ -36,11 +36,25 @@ export default observer(({ label, value, onChange, disabled, error, onBlur, plac
                 step={1}
                 value={strValue}
                 onChange={handleChange}
+                ref={disableWheel}
                 onBlur={onBlur}
                 disabled={disabled}
             />
 
             <ErrorMessage error={error} />
         </label>
     )
-})
+})
+
+
+const LISTENER_ADDED = 'listenerAdded'
+type WithListenerAddedFlag = { [LISTENER_ADDED]?: boolean }
+
+function disableWheel(_ref: HTMLInputElement | null) {
+    const ref = _ref as (HTMLInputElement & WithListenerAddedFlag) | null
+
+    if (ref != null && !ref[LISTENER_ADDED]) {
+        ref[LISTENER_ADDED] = true
+        ref.addEventListener('wheel', e => e.preventDefault(), { passive: false })
+    }
+}