using passive:true for mousemove events

adumesny · adumesny · commit 1307defb74f4 · 2024-01-26T19:13:04.000-08:00
* our app was showing errors calling e.preventDefault() because move events were marked as passive (which are more performant for smooth scrolling) so explicitly  set it passive and skip the call.
* verified the old issue of sweep selecting text field content isn't an issue anymore
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -114,6 +114,7 @@ Change log
 * fix: [#2576](https://github.com/gridstack/gridstack.js/issues/2576) column('none') now ignores layouts
 * fix: [#2560](https://github.com/gridstack/gridstack.js/issues/2560) nested grid fix (enter can call leave which can call enter again) - Thank you [v1talii-dev](https://github.com/v1talii-dev)
 * fix: [#2596](https://github.com/gridstack/gridstack.js/pull/2596) prevent SSR crash
+* fix: [#2610](https://github.com/gridstack/gridstack.js/pull/2610) using passive:true for mousemove events
 * demo: nested.htm now has nested create and drag&drop example - Thank you [fredericrous](https://github.com/fredericrous)
 
 ## 10.0.1 (2023-12-10)
diff --git a/src/dd-draggable.ts b/src/dd-draggable.ts
@@ -158,7 +158,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     delete DDManager.dragElement;
     delete DDManager.dropElement;
     // document handler so we can continue receiving moves as the item is 'fixed' position, and capture=true so WE get a first crack
-    document.addEventListener('mousemove', this._mouseMove, true); // true=capture, not bubble
+    document.addEventListener('mousemove', this._mouseMove, { capture: true, passive: true}); // true=capture, not bubble
     document.addEventListener('mouseup', this._mouseUp, true);
     if (isTouch) {
       this.dragEl.addEventListener('touchmove', touchmove);
@@ -226,7 +226,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
       }
       this.triggerEvent('dragstart', ev);
     }
-    e.preventDefault(); // needed otherwise we get text sweep text selection as we drag around
+    // e.preventDefault(); // passive = true. OLD: was needed otherwise we get text sweep text selection as we drag around
     return true;
   }
 
diff --git a/src/dd-resizable-handle.ts b/src/dd-resizable-handle.ts
@@ -74,7 +74,7 @@ export class DDResizableHandle {
   /** @internal called on mouse down on us: capture move on the entire document (mouse might not stay on us) until we release the mouse */
   protected _mouseDown(e: MouseEvent): void {
     this.mouseDownEvent = e;
-    document.addEventListener('mousemove', this._mouseMove, true); // capture, not bubble
+    document.addEventListener('mousemove', this._mouseMove, { capture: true, passive: true}); // capture, not bubble
     document.addEventListener('mouseup', this._mouseUp, true);
     if (isTouch) {
       this.el.addEventListener('touchmove', touchmove);
@@ -96,7 +96,7 @@ export class DDResizableHandle {
       this._triggerEvent('move', e);
     }
     e.stopPropagation();
-    e.preventDefault();
+    // e.preventDefault(); passive = true
   }
 
   /** @internal */

Original file line number	Diff line number	Diff line change
`@@ -158,7 +158,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt`
`158`	`158`	`delete DDManager.dragElement;`
`159`	`159`	`delete DDManager.dropElement;`
`160`	`160`	`// document handler so we can continue receiving moves as the item is 'fixed' position, and capture=true so WE get a first crack`
`161`		`- document.addEventListener('mousemove', this._mouseMove, true); // true=capture, not bubble`
	`161`	`+ document.addEventListener('mousemove', this._mouseMove, { capture: true, passive: true}); // true=capture, not bubble`
`162`	`162`	`document.addEventListener('mouseup', this._mouseUp, true);`
`163`	`163`	`if (isTouch) {`
`164`	`164`	`this.dragEl.addEventListener('touchmove', touchmove);`
`@@ -226,7 +226,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt`
`226`	`226`	`}`
`227`	`227`	`this.triggerEvent('dragstart', ev);`
`228`	`228`	`}`
`229`		`- e.preventDefault(); // needed otherwise we get text sweep text selection as we drag around`
	`229`	`+ // e.preventDefault(); // passive = true. OLD: was needed otherwise we get text sweep text selection as we drag around`
`230`	`230`	`return true;`
`231`	`231`	`}`
`232`	`232`