Bug fixes

clauderic · Sep 18, 2024 · 35fb956 · 35fb956
1 parent 74e405c
commit 35fb956
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 20 deletions.
diff --git a/packages/dom/src/core/plugins/feedback/Feedback.ts b/packages/dom/src/core/plugins/feedback/Feedback.ts
@@ -277,7 +277,12 @@ export class Feedback extends Plugin<DragDropManager, FeedbackOptions> {
 
         documentMutationObserver = new MutationObserver((entries) => {
           for (const entry of entries) {
-            if (Array.from(entry.addedNodes).includes(element)) {
+            const {addedNodes} = entry;
+
+            if (
+              addedNodes.length > 0 &&
+              Array.from(addedNodes).some((node) => node.contains(element))
+            ) {
               /* Update the position of the placeholder when the source element is moved */
               element.insertAdjacentElement('afterend', placeholder);
 
@@ -357,6 +362,7 @@ export class Feedback extends Plugin<DragDropManager, FeedbackOptions> {
         }
       };
 
+      let dropEffectCleanup: CleanupFunction | undefined;
       cleanup = () => {
         elementMutationObserver?.disconnect();
         documentMutationObserver?.disconnect();
@@ -380,13 +386,13 @@ export class Feedback extends Plugin<DragDropManager, FeedbackOptions> {
         }
 
         cleanupEffect();
-        dropEffectCleanup();
+        dropEffectCleanup?.();
 
         source.status = 'idle';
         moved = false;
       };
 
-      const dropEffectCleanup = effect(function dropAnimation() {
+      dropEffectCleanup = effect(function dropAnimation() {
         if (dragOperation.status.dropped) {
           const onComplete = cleanup;
           cleanup = undefined;

diff --git a/packages/dom/src/sortable/SortableKeyboardPlugin.ts b/packages/dom/src/sortable/SortableKeyboardPlugin.ts
@@ -139,28 +139,26 @@ export class SortableKeyboardPlugin extends Plugin<DragDropManager> {
                 return;
               }
 
-              const {element} = source.sortable;
+              const {target} = source.sortable;
 
-              if (!element) return;
+              if (!target) return;
 
-              scrollIntoViewIfNeeded(element);
-              scheduler.schedule(() => {
-                const shape = new DOMRectangle(element);
+              scrollIntoViewIfNeeded(target);
+              const shape = new DOMRectangle(target);
 
-                if (!shape) {
-                  return;
-                }
+              if (!shape) {
+                return;
+              }
 
-                actions.move({
-                  to: {
-                    x: shape.center.x,
-                    y: shape.center.y,
-                  },
-                });
+              actions.move({
+                to: {
+                  x: shape.center.x,
+                  y: shape.center.y,
+                },
+              });
 
-                actions.setDropTarget(source.id).then(() => {
-                  collisionObserver.enable();
-                });
+              actions.setDropTarget(source.id).then(() => {
+                collisionObserver.enable();
               });
             });
           });

diff --git a/packages/react/src/sortable/useSortable.ts b/packages/react/src/sortable/useSortable.ts
@@ -137,6 +137,14 @@ export function useSortable<T extends Data = Data>(input: UseSortableInput<T>) {
     ),
     targetRef: useCallback(
       (element: Element | null) => {
+        if (
+          !element &&
+          sortable.target?.isConnected &&
+          !manager?.dragOperation.status.idle
+        ) {
+          return;
+        }
+
         sortable.target = element ?? undefined;
       },
       [sortable]