From bfc8ab21cfd9c16a8d90ab250386e6d52d0a40a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Claud=C3=A9ric=20Demers?= <clauderic.demers@shopify.com>
Date: Thu, 29 Aug 2024 11:38:17 -0400
Subject: [PATCH] Defer some setup until activation constraints are met

---
 .changeset/pointer-sensor.md                  |  5 ++
 .../src/core/sensors/pointer/PointerSensor.ts | 48 +++++++++++--------
 2 files changed, 32 insertions(+), 21 deletions(-)
 create mode 100644 .changeset/pointer-sensor.md

diff --git a/.changeset/pointer-sensor.md b/.changeset/pointer-sensor.md
new file mode 100644
index 00000000..8bc50645
--- /dev/null
+++ b/.changeset/pointer-sensor.md
@@ -0,0 +1,5 @@
+---
+'@dnd-kit/dom': patch
+---
+
+**PointerSensor**: Defer invoking `setPointerCapture` until activation constraints are met as it can interfere with `click` and other event handlers. Also deferred adding `touchmove`, `click` and `keydown` event listeners until the activation constraints are met.
diff --git a/packages/dom/src/core/sensors/pointer/PointerSensor.ts b/packages/dom/src/core/sensors/pointer/PointerSensor.ts
index 116113d6..02ca04d0 100644
--- a/packages/dom/src/core/sensors/pointer/PointerSensor.ts
+++ b/packages/dom/src/core/sensors/pointer/PointerSensor.ts
@@ -137,7 +137,6 @@ export class PointerSensor extends Sensor<
     }
 
     const ownerDocument = getDocument(event.target);
-    ownerDocument.body.setPointerCapture(event.pointerId);
 
     const unbindListeners = this.listeners.bind(ownerDocument, [
       {
@@ -152,37 +151,17 @@ export class PointerSensor extends Sensor<
           capture: true,
         },
       },
-      {
-        // Prevent scrolling on touch devices
-        type: 'touchmove',
-        listener: preventDefault,
-        options: {
-          passive: false,
-        },
-      },
-      {
-        // Prevent click events
-        type: 'click',
-        listener: preventDefault,
-      },
       {
         // Cancel activation if there is a competing Drag and Drop interaction
         type: 'dragstart',
         listener: isNativeDraggable ? this.handleCancel : preventDefault,
       },
-      {
-        type: 'keydown',
-        listener: this.handleKeyDown,
-      },
     ]);
 
     const cleanup = () => {
-      console.log('cleanup');
       setTimeout(unbindListeners);
-
       this.#clearTimeout?.();
       this.initialCoordinates = undefined;
-      this.cleanup.delete(cleanup);
     };
 
     this.cleanup.add(cleanup);
@@ -255,6 +234,7 @@ export class PointerSensor extends Sensor<
 
     // Remove the pointer move and up event listeners
     this.cleanup.forEach((cleanup) => cleanup());
+    this.cleanup.clear();
   }
 
   protected handleKeyDown(event: KeyboardEvent) {
@@ -283,6 +263,31 @@ export class PointerSensor extends Sensor<
       manager.actions.setDragSource(source.id);
       manager.actions.start({coordinates: initialCoordinates, event});
     });
+
+    const ownerDocument = getDocument(event.target);
+    const unbind = this.listeners.bind(ownerDocument, [
+      {
+        // Prevent scrolling on touch devices
+        type: 'touchmove',
+        listener: preventDefault,
+        options: {
+          passive: false,
+        },
+      },
+      {
+        // Prevent click events
+        type: 'click',
+        listener: preventDefault,
+      },
+      {
+        type: 'keydown',
+        listener: this.handleKeyDown,
+      },
+    ]);
+
+    ownerDocument.body.setPointerCapture(event.pointerId);
+
+    this.cleanup.add(unbind);
   }
 
   protected handleCancel() {
@@ -294,6 +299,7 @@ export class PointerSensor extends Sensor<
 
     // Remove the pointer move and up event listeners
     this.cleanup.forEach((cleanup) => cleanup());
+    this.cleanup.clear();
   }
 
   public destroy() {