Fix timing issues with sortable keyboard plugin

clauderic · Sep 20, 2024 · f5e336a · f5e336a
1 parent a9798f4
commit f5e336a
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 70 deletions.
diff --git a/packages/dom/src/sortable/SortableKeyboardPlugin.ts b/packages/dom/src/sortable/SortableKeyboardPlugin.ts
@@ -135,45 +135,43 @@ export class SortableKeyboardPlugin extends Plugin<DragDropManager> {
             if (defaultPrevented) return;
 
             // Wait until optimistic sorting has a chance to update the DOM
-            queueMicrotask(() => {
-              const {source, target} = dragOperation;
+            const {source, target} = dragOperation;
 
-              if (!source || !isSortable(source)) {
-                return;
-              }
+            if (!source || !isSortable(source)) {
+              return;
+            }
 
-              const {
-                index: newIndex,
-                group: newGroup,
-                target: targetElement,
-              } = source.sortable;
-              const updated = index !== newIndex || group !== newGroup;
-              const element = updated ? targetElement : target?.element;
+            const {
+              index: newIndex,
+              group: newGroup,
+              target: targetElement,
+            } = source.sortable;
+            const updated = index !== newIndex || group !== newGroup;
+            const element = updated ? targetElement : target?.element;
 
-              if (!element) return;
+            if (!element) return;
 
-              scrollIntoViewIfNeeded(element);
-              const shape = new DOMRectangle(element);
+            scrollIntoViewIfNeeded(element);
+            const shape = new DOMRectangle(element);
 
-              if (!shape) {
-                return;
-              }
-
-              actions.move({
-                to: {
-                  x: shape.center.x,
-                  y: shape.center.y,
-                },
-              });
+            if (!shape) {
+              return;
+            }
 
-              if (updated) {
-                actions
-                  .setDropTarget(source.id)
-                  .then(() => collisionObserver.enable());
-              } else {
-                collisionObserver.enable();
-              }
+            actions.move({
+              to: {
+                x: shape.center.x,
+                y: shape.center.y,
+              },
             });
+
+            if (updated) {
+              actions
+                .setDropTarget(source.id)
+                .then(() => collisionObserver.enable());
+            } else {
+              collisionObserver.enable();
+            }
           });
         });
       }

diff --git a/packages/dom/src/sortable/sortable.ts b/packages/dom/src/sortable/sortable.ts
@@ -192,44 +192,48 @@ export class Sortable<T extends Data = Data> {
       }
 
       manager.renderer.rendering.then(() => {
-        const {element} = this;
-
-        if (!element) {
-          return;
-        }
-
-        const updatedShape = this.refreshShape();
-
-        if (!updatedShape) {
-          return;
-        }
-
-        const delta = {
-          x: shape.boundingRectangle.left - updatedShape.boundingRectangle.left,
-          y: shape.boundingRectangle.top - updatedShape.boundingRectangle.top,
-        };
-
-        const {translate} = getComputedStyles(element);
-        const currentTranslate = computeTranslate(element, translate, false);
-        const finalTranslate = computeTranslate(element, translate);
-
-        if (delta.x || delta.y) {
-          animateTransform({
-            element,
-            keyframes: {
-              translate: [
-                `${currentTranslate.x + delta.x}px ${currentTranslate.y + delta.y}px ${currentTranslate.z}`,
-                `${finalTranslate.x}px ${finalTranslate.y}px ${finalTranslate.z}`,
-              ],
-            },
-            options: transition,
-            onFinish: () => {
-              if (!manager.dragOperation.status.dragging) {
-                this.droppable.shape = undefined;
-              }
-            },
-          });
-        }
+        queueMicrotask(() => {
+          const {element} = this;
+
+          if (!element) {
+            return;
+          }
+
+          const updatedShape = this.refreshShape();
+
+          if (!updatedShape) {
+            return;
+          }
+
+          const delta = {
+            x:
+              shape.boundingRectangle.left -
+              updatedShape.boundingRectangle.left,
+            y: shape.boundingRectangle.top - updatedShape.boundingRectangle.top,
+          };
+
+          const {translate} = getComputedStyles(element);
+          const currentTranslate = computeTranslate(element, translate, false);
+          const finalTranslate = computeTranslate(element, translate);
+
+          if (delta.x || delta.y) {
+            animateTransform({
+              element,
+              keyframes: {
+                translate: [
+                  `${currentTranslate.x + delta.x}px ${currentTranslate.y + delta.y}px ${currentTranslate.z}`,
+                  `${finalTranslate.x}px ${finalTranslate.y}px ${finalTranslate.z}`,
+                ],
+              },
+              options: transition,
+              onFinish: () => {
+                if (!manager.dragOperation.status.dragging) {
+                  this.droppable.shape = undefined;
+                }
+              },
+            });
+          }
+        });
       });
     });
   }