From c0492c75584c04ac36ce169fa6a9d60188dcd06b Mon Sep 17 00:00:00 2001
From: logonoff <git@logonoff.co>
Date: Thu, 7 May 2026 14:54:06 -0400
Subject: [PATCH] fix(DragDropSort): enable mobile drag-and-drop support

Set touch-action: none on the drag activator element (DragButton when
useDragButton is true, wrapper div otherwise) to prevent the browser
from intercepting touch events for native scrolling. Without this,
mobile browsers fire pointercancel before the PointerSensor can
activate the drag.

Also adds activationConstraint: { distance: 8 } to PointerSensor so
the drag only activates after deliberate pointer movement, preventing
accidental drags on both desktop and mobile.

Adds restrictToWindowEdges modifier to DndContext so dragged items
cannot be moved outside the browser viewport. Consumers can override
this via the modifiers prop.

Fixes https://github.com/patternfly/patternfly-react/issues/12415
---
 .../react-drag-drop/src/components/DragDrop/DragButton.tsx  | 1 +
 .../src/components/DragDrop/DragDropContainer.tsx           | 6 +++++-
 .../react-drag-drop/src/components/DragDrop/Draggable.tsx   | 3 ++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/react-drag-drop/src/components/DragDrop/DragButton.tsx b/packages/react-drag-drop/src/components/DragDrop/DragButton.tsx
index 101e666dc91..b828c44783c 100644
--- a/packages/react-drag-drop/src/components/DragDrop/DragButton.tsx
+++ b/packages/react-drag-drop/src/components/DragDrop/DragButton.tsx
@@ -27,6 +27,7 @@ export const DragButton: React.FunctionComponent<DragButtonProps> = ({
     className={css(className)}
     aria-label={ariaLabel}
     aria-labelledby={ariaLabelledby}
+    style={{ touchAction: 'none' }}
     icon={
       <span className={css(dragButtonStyles.dataListItemDraggableIcon)}>
         <RhUiGripVerticalFillIcon />
diff --git a/packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx b/packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx
index 6e34564218a..de34c57dd53 100644
--- a/packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx
+++ b/packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx
@@ -21,6 +21,7 @@ import {
   DragCancelEvent
 } from '@dnd-kit/core';
 import { arrayMove, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+import { restrictToWindowEdges } from '@dnd-kit/modifiers';
 import { Draggable } from './Draggable';
 import { DraggableDataListItem } from './DraggableDataListItem';
 import { DraggableDualListSelectorListItem } from './DraggableDualListSelectorListItem';
@@ -103,7 +104,9 @@ export const DragDropContainer: React.FunctionComponent<DragDropContainerProps>
   );
 
   const sensors = useSensors(
-    useSensor(PointerSensor),
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 8 }
+    }),
     useSensor(KeyboardSensor, {
       coordinateGetter: sortableKeyboardCoordinates
     })
@@ -298,6 +301,7 @@ export const DragDropContainer: React.FunctionComponent<DragDropContainerProps>
     <DndContext
       sensors={sensors}
       collisionDetection={collisionDetectionStrategy}
+      modifiers={[restrictToWindowEdges]}
       onDragEnd={handleDragEnd}
       onDragOver={handleDragOver}
       onDragStart={handleDragStart}
diff --git a/packages/react-drag-drop/src/components/DragDrop/Draggable.tsx b/packages/react-drag-drop/src/components/DragDrop/Draggable.tsx
index ed9da5ca880..94c4479a1ec 100644
--- a/packages/react-drag-drop/src/components/DragDrop/Draggable.tsx
+++ b/packages/react-drag-drop/src/components/DragDrop/Draggable.tsx
@@ -31,7 +31,8 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
 
   const style = {
     transform: CSS.Transform.toString(transform),
-    transition
+    transition,
+    ...(!useDragButton && { touchAction: 'none' as const })
   };
 
   return useDragButton ? (