fix: Fix glitchy iOS media attachment drag interactions (#35057)

app/javascript/mastodon/features/compose/components/upload.tsx

@@ -22,10 +22,11 @@ import { useAppDispatch, useAppSelector } from 'mastodon/store';
 export const Upload: React.FC<{
   id: string;
   dragging?: boolean;
+  draggable?: boolean;
   overlay?: boolean;
   tall?: boolean;
   wide?: boolean;
-}> = ({ id, dragging, overlay, tall, wide }) => {
+}> = ({ id, dragging, draggable = true, overlay, tall, wide }) => {
   const dispatch = useAppDispatch();
   const media = useAppSelector((state) =>
     (
@@ -71,6 +72,7 @@ export const Upload: React.FC<{
     <div
       className={classNames('compose-form__upload media-gallery__item', {
         dragging,
+        draggable,
         overlay,
         'media-gallery__item--tall': tall,
         'media-gallery__item--wide': wide,

app/javascript/mastodon/features/compose/components/upload_form.tsx

@@ -116,6 +116,10 @@ export const UploadForm: React.FC = () => {
     [dispatch, setActiveId],
   );
 
+  const handleDragCancel = useCallback(() => {
+    setActiveId(null);
+  }, [setActiveId]);
+
   const accessibility: {
     screenReaderInstructions: ScreenReaderInstructions;
     announcements: Announcements;
@@ -158,32 +162,46 @@ export const UploadForm: React.FC = () => {
         <div
           className={`compose-form__uploads media-gallery media-gallery--layout-${mediaIds.size}`}
         >
-          <DndContext
+          {mediaIds.size === 1 ? (
-            sensors={sensors}
+            <Upload
-            collisionDetection={closestCenter}
+              id={mediaIds.first()}
-            onDragStart={handleDragStart}
+              dragging={false}
-            onDragEnd={handleDragEnd}
+              draggable={false}
-            accessibility={accessibility}
+              tall
-          >
+              wide
-            <SortableContext
+            />
-              items={mediaIds.toArray()}
+          ) : (
-              strategy={rectSortingStrategy}
+            <DndContext
+              sensors={sensors}
+              collisionDetection={closestCenter}
+              onDragStart={handleDragStart}
+              onDragEnd={handleDragEnd}
+              onDragCancel={handleDragCancel}
+              onDragAbort={handleDragCancel}
+              accessibility={accessibility}
             >
-              {mediaIds.map((id, idx) => (
+              <SortableContext
-                <Upload
+                items={mediaIds.toArray()}
-                  key={id}
+                strategy={rectSortingStrategy}
-                  id={id}
+              >
-                  dragging={id === activeId}
+                {mediaIds.map((id, idx) => (
-                  tall={mediaIds.size < 3 || (mediaIds.size === 3 && idx === 0)}
+                  <Upload
-                  wide={mediaIds.size === 1}
+                    key={id}
-                />
+                    id={id}
-              ))}
+                    dragging={id === activeId}
-            </SortableContext>
+                    tall={
+                      mediaIds.size < 3 || (mediaIds.size === 3 && idx === 0)
+                    }
+                    wide={mediaIds.size === 1}
+                  />
+                ))}
+              </SortableContext>
 
-            <DragOverlay>
+              <DragOverlay>
-              {activeId ? <Upload id={activeId as string} overlay /> : null}
+                {activeId ? <Upload id={activeId as string} overlay /> : null}
-            </DragOverlay>
+              </DragOverlay>
-          </DndContext>
+            </DndContext>
+          )}
         </div>
       )}
     </>

app/javascript/styles/mastodon/components.scss

@@ -708,7 +708,12 @@ body > [data-popper-placement] {
 
   &__upload {
     position: relative;
-    cursor: grab;
+
+    &.draggable {
+      will-change: transform, opacity;
+      touch-action: none;
+      cursor: grab;
+    }
 
     &.dragging {
       opacity: 0;
@@ -720,18 +725,6 @@ body > [data-popper-placement] {
       pointer-events: none;
     }
 
-    &__drag-handle {
-      position: absolute;
-      top: 50%;
-      inset-inline-start: 0;
-      transform: translateY(-50%);
-      color: $white;
-      background: transparent;
-      border: 0;
-      padding: 8px 3px;
-      cursor: grab;
-    }
-
     &__actions {
       display: flex;
       align-items: flex-start;