fix(core): set wheel event listener to passive for better perf (#971)

ghiscoding · May 12, 2023 · e4417e8 · e4417e8
1 parent 9175503
commit e4417e8
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 5 deletions.
diff --git a/packages/common/src/editors/floatEditor.ts b/packages/common/src/editors/floatEditor.ts
@@ -52,7 +52,7 @@ export class FloatEditor extends InputEditor {
 
       if (compositeEditorOptions) {
         this._bindEventService.bind(this._input, ['input', 'paste'], this.handleOnInputChange.bind(this) as EventListener);
-        this._bindEventService.bind(this._input, 'wheel', this.handleOnMouseWheel.bind(this) as EventListener);
+        this._bindEventService.bind(this._input, 'wheel', this.handleOnMouseWheel.bind(this) as EventListener, { passive: true });
       }
     }
   }

diff --git a/packages/common/src/editors/integerEditor.ts b/packages/common/src/editors/integerEditor.ts
@@ -50,7 +50,7 @@ export class IntegerEditor extends InputEditor {
 
       if (compositeEditorOptions) {
         this._bindEventService.bind(this._input, ['input', 'paste'], this.handleOnInputChange.bind(this) as EventListener);
-        this._bindEventService.bind(this._input, 'wheel', this.handleOnMouseWheel.bind(this) as EventListener);
+        this._bindEventService.bind(this._input, 'wheel', this.handleOnMouseWheel.bind(this) as EventListener, { passive: true });
       }
     }
   }

diff --git a/packages/common/src/filters/inputFilter.ts b/packages/common/src/filters/inputFilter.ts
@@ -103,7 +103,8 @@ export class InputFilter implements Filter {
     // step 2, subscribe to the input event and run the callback when that happens
     // also add/remove "filled" class for styling purposes
     // we'll use all necessary events to cover the following (keyup, change, mousewheel & spinner)
-    this._bindEventService.bind(this._filterInputElm, ['keyup', 'blur', 'change', 'wheel'], this.onTriggerEvent.bind(this) as EventListener);
+    this._bindEventService.bind(this._filterInputElm, ['keyup', 'blur', 'change'], this.onTriggerEvent.bind(this) as EventListener);
+    this._bindEventService.bind(this._filterInputElm, 'wheel', this.onTriggerEvent.bind(this) as EventListener, { passive: true });
     if (this.inputFilterType === 'compound' && this._selectOperatorElm) {
       this._bindEventService.bind(this._selectOperatorElm, 'change', this.onTriggerEvent.bind(this) as EventListener);
     }

diff --git a/packages/common/src/filters/inputMaskFilter.ts b/packages/common/src/filters/inputMaskFilter.ts
@@ -49,12 +49,11 @@ export class InputMaskFilter extends InputFilter {
 
     // step 2, subscribe to the input event and run the callback when that happens
     // also add/remove "filled" class for styling purposes
-    // we'll use all necessary events to cover the following (keyup, change, mousewheel & spinner)
     this._bindEventService.bind(this._filterInputElm, ['keyup', 'blur', 'change'], this.onTriggerEvent.bind(this) as EventListener);
   }
 
   /**
-   * Event handler to cover the following (keyup, change, mousewheel & spinner)
+   * Event handler to cover the following (keyup, blur, change)
    * We will trigger the Filter Service callback from this handler
    */
   protected onTriggerEvent(event?: MouseEvent | KeyboardEvent, isClearFilterEvent = false) {