diff --git a/.size-snapshot.json b/.size-snapshot.json index 424d87419e..77b9a8f0b0 100644 --- 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": 31422 }, "dist/react-beautiful-dnd.esm.js": { - "bundled": 240910, - "minified": 125371, - "gzipped": 32650, + "bundled": 241424, + "minified": 125681, + "gzipped": 32722, "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 index 2c7187f18a..0df7089934 100644 --- 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 index 01f87a944b..663517e1b3 100644 --- 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 index db3ac12556..7c43f8d0f9 100644 --- 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'; @@ -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), @@ -473,6 +481,7 @@ export default function useSensorMarshal({ canGetLock, tryGetLock, findClosestDraggableId, + findClosestDragHandle, findOptionsForDraggable, tryReleaseLock, isLockClaimed, @@ -481,6 +490,7 @@ export default function useSensorMarshal({ canGetLock, tryGetLock, findClosestDraggableId, + findClosestDragHandle, findOptionsForDraggable, tryReleaseLock, isLockClaimed,