fix: Use setState callback in finishDrop to avoid occasional flicker

tajo · Jan 30, 2025 · 7d6e909 · 7d6e909
1 parent a53fc88
commit 7d6e909
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 23 deletions.
diff --git a/.changeset/green-poems-shake.md b/.changeset/green-poems-shake.md
@@ -0,0 +1,5 @@
+---
+"react-movable": patch
+---
+
+Use setState callback in finishDrop to avoid occasional flicker
diff --git a/src/List.tsx b/src/List.tsx
@@ -484,31 +484,33 @@ class List<Value = string> extends React.Component<IProps<Value>> {
         ? -1
         : Math.max(this.afterIndex, 0)
       : oldIndex;
-    if (removeItem || hasChanged) {
-      this.props.onChange({
-        oldIndex,
-        newIndex,
-        targetRect: this.ghostRef.current!.getBoundingClientRect(),
-      });
-    }
-    this.props.afterDrag &&
-      this.props.afterDrag({
-        elements: this.getChildren(),
-        oldIndex,
-        newIndex,
+    const targetRect = this.ghostRef.current!.getBoundingClientRect();
+    this.setState({ itemDragged: -1, scrollingSpeed: 0 }, () => {
+      if (removeItem || hasChanged) {
+        this.props.onChange({
+          oldIndex,
+          newIndex,
+          targetRect: targetRect,
+        });
+      }
+      this.props.afterDrag &&
+        this.props.afterDrag({
+          elements: this.getChildren(),
+          oldIndex,
+          newIndex,
+        });
+      this.getChildren().forEach((item) => {
+        setItemTransition(item, 0);
+        transformItem(item, null);
+        (item as HTMLElement).style.touchAction = "";
       });
-    this.getChildren().forEach((item) => {
-      setItemTransition(item, 0);
-      transformItem(item, null);
-      (item as HTMLElement).style.touchAction = "";
+      this.afterIndex = -2;
+      // sometimes the scroll gets messed up after the drop, fix:
+      if (this.lastScroll > 0) {
+        this.listRef.current!.scrollTop = this.lastScroll;
+        this.lastScroll = 0;
+      }
     });
-    this.setState({ itemDragged: -1, scrollingSpeed: 0 });
-    this.afterIndex = -2;
-    // sometimes the scroll gets messed up after the drop, fix:
-    if (this.lastScroll > 0) {
-      this.listRef.current!.scrollTop = this.lastScroll;
-      this.lastScroll = 0;
-    }
   };
 
   onKeyDown = (e: React.KeyboardEvent) => {