diff --git a/.changeset/green-poems-shake.md b/.changeset/green-poems-shake.md new file mode 100644 index 0000000..d41913e --- /dev/null +++ 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 index 8d37320..6b50341 100644 --- a/src/List.tsx +++ b/src/List.tsx @@ -484,31 +484,33 @@ class List extends React.Component> { ? -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) => {