Fix pointer sensor preventing default event behaviour on attachment.

Instead, wait for activation of drag before intercepting relevant
events. This avoids unexpected side effects, such as an `<input/>`
not receiving focus on click.

With this change, also listen for and clear any text selection that
happens as a side effect during an active drag operation.

Author: martinpengellyphillips

CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [Unreleased]
+
+### Fixed
+
+- Fix pointer sensor preventing default event behaviour on attachment. Instead,
+  wait for activation of drag before intercepting relevant events. This avoids
+  unexpected side effects, such as an `<input/>` not receiving focus on click.
+
+  With this change, also listen for and clear any text selection that happens as
+  a side effect during an active drag operation.
+
+  Thanks to [@yonathan06](https://github.com/yonathan06) for reporting this
+  behaviour.
+
 ## [0.4.0] - 2022-01-09
 
 ### Added

src/create-pointer-sensor.ts

@@ -34,7 +34,6 @@ const createPointerSensor = (id: string | number = "pointer-sensor"): void => {
   let activationDraggableId: string | number | null = null;
 
   const attach = (event: PointerEvent, draggableId: string | number): void => {
-    event.preventDefault();
     document.addEventListener("pointermove", onPointerMove);
     document.addEventListener("pointerup", onPointerUp);
 
@@ -53,12 +52,16 @@ const createPointerSensor = (id: string | number = "pointer-sensor"): void => {
 
     document.removeEventListener("pointermove", onPointerMove);
     document.removeEventListener("pointerup", onPointerUp);
+    document.removeEventListener("selectionchange", clearSelection);
   };
 
   const onActivate = (): void => {
     if (!anySensorActive()) {
       sensorStart(id);
       dragStart(activationDraggableId!);
+
+      clearSelection();
+      document.addEventListener("selectionchange", clearSelection);
     } else if (!isActiveSensor()) {
       detach();
     }
@@ -90,6 +93,10 @@ const createPointerSensor = (id: string | number = "pointer-sensor"): void => {
       sensorEnd();
     }
   };
+
+  const clearSelection = () => {
+    window.getSelection()?.removeAllRanges();
+  };
 };
 
 export { createPointerSensor };