fix: active events...

packages/core/src/components/number/index.jsx

@@ -3,6 +3,7 @@ import './index.scss';
 import {
   PropTypes,
   React,
+  useEffect,
   useRef,
 } from '@latus/react';
 
@@ -14,13 +15,33 @@ const Number = ({
 }) => {
   const inputRef = useRef(null);
   const parser = integer ? (v) => parseInt(v, 10) : parseFloat;
-  // eslint-disable-next-line no-param-reassign
-  step = parser(step);
   const increment = (event, factor) => {
     const value = parser(inputRef.current.value);
     const incrementBy = event.shiftKey ? (step / 10) : step;
     onChange(parser(parser(value + (factor * incrementBy)).toPrecision(12)), event);
   };
+  const onWheel = (event) => {
+    event.preventDefault();
+    if (event.deltaY > 0) {
+      increment(event, -1);
+    }
+    else if (event.deltaY < 0) {
+      increment(event, 1);
+    }
+  };
+  // Workaround for https://github.com/facebook/react/issues/8968
+  useEffect(() => {
+    if (!inputRef.current) {
+      return undefined;
+    }
+    const input = inputRef.current;
+    input.addEventListener('wheel', onWheel);
+    return () => {
+      input.removeEventListener('wheel', onWheel);
+    };
+  });
+  // eslint-disable-next-line no-param-reassign
+  step = parser(step);
   return (
     <div className="number">
       <>
@@ -29,14 +50,7 @@ const Number = ({
           onChange={(event) => {
             onChange(parser(event.target.value));
           }}
-          onWheel={(event) => {
-            if (event.deltaY > 0) {
-              increment(event, -1);
-            }
-            else if (event.deltaY < 0) {
-              increment(event, 1);
-            }
-          }}
+          // onWheel={onWheel}
           ref={inputRef}
           step={step}
           type="number"