@trackunit/react-form-components 1.6.33 → 1.7.0

package/index.cjs.js

@@ -1129,7 +1129,40 @@ const validateNumber = (number, required = false, min, max) => {
  * NOTE: If shown with a label, please use the `NumberField` component instead.
  */
 const NumberInput = ({ ref, ...rest }) => {
-    return jsxRuntime.jsx(BaseInput, { ref: ref, type: "number", ...rest, value: rest.value });
+    const inputElementRef = react.useRef(null);
+    const preventDefaultWheelEvent = react.useCallback((event) => {
+        const inputElement = inputElementRef.current;
+        const activeElement = document.activeElement;
+        if (inputElement && activeElement === inputElement) {
+            event.preventDefault();
+        }
+    }, []);
+    const forwardAndStoreInputRef = react.useCallback((node) => {
+        const previousNode = inputElementRef.current;
+        if (previousNode) {
+            previousNode.removeEventListener("wheel", preventDefaultWheelEvent);
+        }
+        inputElementRef.current = node;
+        if (node) {
+            // NOTE: Prevent the default browser behavior of changing the value via mouse wheel
+            node.addEventListener("wheel", preventDefaultWheelEvent, { passive: false });
+        }
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref && typeof ref === "object") {
+            ref.current = node;
+        }
+    }, [preventDefaultWheelEvent, ref]);
+    react.useEffect(() => {
+        return () => {
+            const element = inputElementRef.current;
+            if (element) {
+                element.removeEventListener("wheel", preventDefaultWheelEvent);
+            }
+        };
+    }, [preventDefaultWheelEvent]);
+    return jsxRuntime.jsx(BaseInput, { ref: forwardAndStoreInputRef, type: "number", ...rest, value: rest.value });
 };
 NumberInput.displayName = "NumberInput";
 

package/index.esm.js

@@ -1128,7 +1128,40 @@ const validateNumber = (number, required = false, min, max) => {
  * NOTE: If shown with a label, please use the `NumberField` component instead.
  */
 const NumberInput = ({ ref, ...rest }) => {
-    return jsx(BaseInput, { ref: ref, type: "number", ...rest, value: rest.value });
+    const inputElementRef = useRef(null);
+    const preventDefaultWheelEvent = useCallback((event) => {
+        const inputElement = inputElementRef.current;
+        const activeElement = document.activeElement;
+        if (inputElement && activeElement === inputElement) {
+            event.preventDefault();
+        }
+    }, []);
+    const forwardAndStoreInputRef = useCallback((node) => {
+        const previousNode = inputElementRef.current;
+        if (previousNode) {
+            previousNode.removeEventListener("wheel", preventDefaultWheelEvent);
+        }
+        inputElementRef.current = node;
+        if (node) {
+            // NOTE: Prevent the default browser behavior of changing the value via mouse wheel
+            node.addEventListener("wheel", preventDefaultWheelEvent, { passive: false });
+        }
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref && typeof ref === "object") {
+            ref.current = node;
+        }
+    }, [preventDefaultWheelEvent, ref]);
+    useEffect(() => {
+        return () => {
+            const element = inputElementRef.current;
+            if (element) {
+                element.removeEventListener("wheel", preventDefaultWheelEvent);
+            }
+        };
+    }, [preventDefaultWheelEvent]);
+    return jsx(BaseInput, { ref: forwardAndStoreInputRef, type: "number", ...rest, value: rest.value });
 };
 NumberInput.displayName = "NumberInput";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.6.33",
+  "version": "1.7.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {