From d6db4ffbf0970b8b1236934dcb58460a773728e4 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
---
 .../src/components/DragDrop/DragDropContainer.tsx           | 6 +++++-
 .../react-drag-drop/src/components/DragDrop/Draggable.tsx   | 5 +++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx b/packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx
index 9abfabbadd1..3acfc4a4357 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 71b2bcf2c98..1bfdd9b3b94 100644
--- a/packages/react-drag-drop/src/components/DragDrop/Draggable.tsx
+++ b/packages/react-drag-drop/src/components/DragDrop/Draggable.tsx
@@ -28,7 +28,8 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
 
   const style = {
     transform: CSS.Transform.toString(transform),
-    transition
+    transition,
+    ...(!useDragButton && { touchAction: 'none' as const })
   };
 
   return useDragButton ? (
@@ -38,7 +39,7 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
       style={style}
       {...props}
     >
-      <DragButton {...attributes} {...listeners} />
+      <DragButton {...attributes} {...listeners} style={{ touchAction: 'none' }} />
       {children}
     </div>
   ) : (