Move the onWheel to a manual declaration, with passive false, allowin…

…g preventDefault
4ian · Sep 9, 2024 · f770224 · f770224
1 parent 64c1157
commit f770224
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/newIDE/app/src/UI/CompactSemiControlledNumberField/index.js b/newIDE/app/src/UI/CompactSemiControlledNumberField/index.js
@@ -45,7 +45,7 @@ const CompactSemiControlledNumberField = ({
   const onChangeValue = React.useCallback(
     (
       newValueAsString: string,
-      reason: 'keyInput' | 'iconControl' | 'blur' | 'userValidation'
+      reason: 'keyInput' | 'wheel' | 'iconControl' | 'blur' | 'userValidation'
     ) => {
       const newValueAsFloat = parseFloat(newValueAsString);
       if (reason === 'iconControl') {
@@ -60,6 +60,7 @@ const CompactSemiControlledNumberField = ({
 
       if (
         reason === 'keyInput' ||
+        reason === 'wheel' ||
         reason === 'blur' ||
         reason === 'userValidation'
       ) {
@@ -126,11 +127,11 @@ const CompactSemiControlledNumberField = ({
         onWheel={event => {
           if (event.deltaY < 0) {
             event.preventDefault();
-            onChangeValue((value + 1).toString(), 'keyInput');
+            onChangeValue((value + 1).toString(), 'wheel');
           }
           if (event.deltaY > 0) {
             event.preventDefault();
-            onChangeValue((value - 1).toString(), 'keyInput');
+            onChangeValue((value - 1).toString(), 'wheel');
           }
         }}
         onKeyUp={event => {

diff --git a/newIDE/app/src/UI/CompactTextField/index.js b/newIDE/app/src/UI/CompactTextField/index.js
@@ -108,6 +108,28 @@ const CompactTextField = React.forwardRef<
       },
     }));
 
+    // The wheel event is added manually, instead of using the `onWheel` prop,
+    // because by default the `onWheel` is registered as a passive event listener,
+    // which prevents us to use `preventDefault` on the event, which is needed
+    // when we want to avoid the page to scroll when the user is scrolling on the input.
+    React.useEffect(
+      () => {
+        const input = inputRef.current;
+        if (input && onWheel) {
+          input.addEventListener('wheel', onWheel, {
+            passive: false,
+          });
+          return () => {
+            input &&
+              input.removeEventListener('wheel', onWheel, {
+                passive: false,
+              });
+          };
+        }
+      },
+      [onWheel]
+    );
+
     return (
       <div
         className={classNames({
@@ -172,7 +194,6 @@ const CompactTextField = React.forwardRef<
             onFocus={onFocusInput}
             onKeyDown={onKeyDown}
             onKeyUp={onKeyUp}
-            onWheel={onWheel}
           />
           {renderEndAdornmentOnHover && (
             <button