Merge pull request #383 from 10up/fix/367

fix/367: Repeater: WordPress 6.8 Dragging issue

Author: fabiankaegy

components/drag-handle/index.tsx

@@ -1,24 +1,28 @@
-import type { SVGProps } from 'react';
+import type { HTMLAttributes } from 'react';
+
+interface DragHandleProps extends HTMLAttributes<HTMLSpanElement> {
+	isDragging?: boolean;
+}
 
 /**
  * Renders an SVG drag handle.
  *
  * @param {object} props The prop object.
  * @returns {*} React JSX
  */
-
-export const DragHandle: React.FC<SVGProps<SVGSVGElement>> = (props) => (
-	<svg
-		style={{ marginRight: '10px', cursor: 'grab', flexShrink: 0 }}
-		width="18"
-		height="18"
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 18 18"
-		role="img"
-		aria-hidden="true"
-		focusable="false"
-		{...props}
-	>
-		<path d="M5 4h2V2H5v2zm6-2v2h2V2h-2zm-6 8h2V8H5v2zm6 0h2V8h-2v2zm-6 6h2v-2H5v2zm6 0h2v-2h-2v2z" />
-	</svg>
+export const DragHandle: React.FC<DragHandleProps> = (props) => (
+	<span {...props} style={{ cursor: props.isDragging ? 'grabbing' : 'grab' }}>
+		<svg
+			style={{ marginRight: '10px', cursor: 'grab', flexShrink: 0 }}
+			width="18"
+			height="18"
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 18 18"
+			role="img"
+			aria-hidden="true"
+			focusable="false"
+		>
+			<path d="M5 4h2V2H5v2zm6-2v2h2V2h-2zm-6 8h2V8H5v2zm6 0h2V8h-2v2zm-6 6h2v-2H5v2zm6 0h2v-2h-2v2z" />
+		</svg>
+	</span>
 );

components/repeater/index.js

@@ -66,7 +66,7 @@ const SortableItem = ({ children, item = {}, setItem = null, removeItem = null,
 				: repeaterItem.props.className,
 		},
 		[
-			<DragHandle className="repeater-item__drag-handle" {...attributes} {...listeners} />,
+			<DragHandle className="repeater-item__drag-handle" {...attributes} {...listeners} isDragging={ isDragging } />,
 			repeaterItem.props.children,
 		],
 	);