fix: Fix touch sensor (ref: atlassian#2281)

pplink · Sep 29, 2021 · cd9469f · cd9469f
1 parent e0967cb
commit cd9469f
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 17 deletions.
diff --git a/.size-snapshot.json b/.size-snapshot.json
@@ -1,18 +1,18 @@
 {
   "dist/react-beautiful-dnd.js": {
-    "bundled": 364998,
-    "minified": 133574,
-    "gzipped": 39437
+    "bundled": 365551,
+    "minified": 133810,
+    "gzipped": 39559
   },
   "dist/react-beautiful-dnd.min.js": {
-    "bundled": 306810,
-    "minified": 108365,
-    "gzipped": 31340
+    "bundled": 307297,
+    "minified": 108548,
+    "gzipped": 31423
   },
   "dist/react-beautiful-dnd.esm.js": {
-    "bundled": 240910,
-    "minified": 125371,
-    "gzipped": 32650,
+    "bundled": 241424,
+    "minified": 125681,
+    "gzipped": 32721,
     "treeshaked": {
       "rollup": {
         "code": 21121,

diff --git a/src/view/use-sensor-marshal/find-closest-draggable-id-from-event.js b/src/view/use-sensor-marshal/find-closest-draggable-id-from-event.js
@@ -10,7 +10,7 @@ function getSelector(contextId: ContextId): string {
   return `[${attributes.dragHandle.contextId}="${contextId}"]`;
 }
 
-function findClosestDragHandleFromEvent(
+export function findClosestDragHandleFromEvent(
   contextId: ContextId,
   event: Event,
 ): ?HTMLElement {

diff --git a/src/view/use-sensor-marshal/sensors/use-touch-sensor.js b/src/view/use-sensor-marshal/sensors/use-touch-sensor.js
@@ -293,11 +293,14 @@ export default function useTouchSensor(api: SensorAPI) {
           y: clientY,
         };
 
+        const handle: ?HTMLElement = api.findClosestDragHandle(event);
+        invariant(handle, 'Touch sensor unable to find drag handle');
+
         // unbind this event handler
         unbindEventsRef.current();
 
         // eslint-disable-next-line no-use-before-define
-        startPendingDrag(actions, point);
+        startPendingDrag(actions, point, handle);
       },
     }),
     // not including stop or startPendingDrag as it is not defined initially
@@ -350,7 +353,7 @@ export default function useTouchSensor(api: SensorAPI) {
   }, [stop]);
 
   const bindCapturingEvents = useCallback(
-    function bindCapturingEvents() {
+    function bindCapturingEvents(target: HTMLElement) {
       const options: EventOptions = { capture: true, passive: false };
       const args: GetBindingArgs = {
         cancel,
@@ -366,7 +369,7 @@ export default function useTouchSensor(api: SensorAPI) {
       // Old behaviour:
       // https://gist.github.com/parris/dda613e3ae78f14eb2dc9fa0f4bfce3d
       // https://stackoverflow.com/questions/33298828/touch-move-event-dont-fire-after-touch-start-target-is-removed
-      const unbindTarget = bindEvents(window, getHandleBindings(args), options);
+      const unbindTarget = bindEvents(target, getHandleBindings(args), options);
       const unbindWindow = bindEvents(window, getWindowBindings(args), options);
 
       unbindEventsRef.current = function unbindAll() {
@@ -397,7 +400,11 @@ export default function useTouchSensor(api: SensorAPI) {
   );
 
   const startPendingDrag = useCallback(
-    function startPendingDrag(actions: PreDragActions, point: Position) {
+    function startPendingDrag(
+      actions: PreDragActions,
+      point: Position,
+      target: HTMLElement,
+    ) {
       invariant(
         getPhase().type === 'IDLE',
         'Expected to move from IDLE to PENDING drag',
@@ -415,7 +422,7 @@ export default function useTouchSensor(api: SensorAPI) {
         longPressTimerId,
       });
 
-      bindCapturingEvents();
+      bindCapturingEvents(target);
     },
     [bindCapturingEvents, getPhase, setPhase, startDragging],
   );

diff --git a/src/view/use-sensor-marshal/use-sensor-marshal.js b/src/view/use-sensor-marshal/use-sensor-marshal.js
@@ -45,7 +45,9 @@ import getBorderBoxCenterPosition from '../get-border-box-center-position';
 import { warning } from '../../dev-warning';
 import useLayoutEffect from '../use-isomorphic-layout-effect';
 import { noop } from '../../empty';
-import findClosestDraggableIdFromEvent from './find-closest-draggable-id-from-event';
+import findClosestDraggableIdFromEvent, {
+  findClosestDragHandleFromEvent,
+} from './find-closest-draggable-id-from-event';
 import findDraggable from '../get-elements/find-draggable';
 import bindEvents from '../event-bindings/bind-events';
 
@@ -233,7 +235,7 @@ function tryStart({
 
     function finish(
       reason: 'CANCEL' | 'DROP',
-      options?: StopDragOptions = { shouldBlockNextClick: false },
+      options: StopDragOptions = { shouldBlockNextClick: false },
     ) {
       args.cleanup();
 
@@ -438,6 +440,12 @@ export default function useSensorMarshal({
     [contextId, lockAPI, registry, store],
   );
 
+  const findClosestDragHandle = useCallback(
+    (event: Event): ?DraggableId =>
+      findClosestDragHandleFromEvent(contextId, event),
+    [contextId],
+  );
+
   const findClosestDraggableId = useCallback(
     (event: Event): ?DraggableId =>
       findClosestDraggableIdFromEvent(contextId, event),
@@ -472,6 +480,7 @@ export default function useSensorMarshal({
     () => ({
       canGetLock,
       tryGetLock,
+      findClosestDragHandle,
       findClosestDraggableId,
       findOptionsForDraggable,
       tryReleaseLock,
@@ -480,6 +489,7 @@ export default function useSensorMarshal({
     [
       canGetLock,
       tryGetLock,
+      findClosestDragHandle,
       findClosestDraggableId,
       findOptionsForDraggable,
       tryReleaseLock,