motion
motion copied to clipboard
[BUG] Reordering randomly stuck
2. Describe the bug
Simple dnd for tabs reordering implemented based on the mantine framework and Reorder component from framer. At some conditions tab does not return to its position and stuck half way after mouse release.
3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
4. Steps to reproduce
Steps to reproduce the behavior:
- Reorder tabs with different speed and direction. Release mouse button randomly.
- Tab does not return to its original place
Note: issue is flaky, it may not be reproduced from the first time. Need to try multiple times. Note2: issue also reproducible with simple divs, but it much harder to achieve than with this tab component.
5. Expected behavior
Tab should return to its original position.
6. Video or screenshots
https://www.awesomescreenshot.com/video/16890983?key=a98190f65e1a774787d9b25f462637c5
7. Environment details
Chrome (Version 111.0.5563.146 (Official Build) (64-bit)) Chrome on iPad (latest versions)
happening to me too, not just with tabs
I confirmed this issue does NOT exist in 10.11 and does exist in 10.12.8
And 10.12.7 seems to be okay, it only exists in 10.12.8. Sorry, I didn't try your example at first, for me I only wrote a simple reorder list, I only notice this bug in 10.12.8. Very easy to reproduce: just hold the first item and drag it downward. While the second item is animating, drag it upward. The second item, which is now the first, will be stuck until the next time you interact with it.
https://github.com/framer/motion/blob/f425de919dc45c0a31f1c514a4a4c4fa8911ab67/packages/framer-motion/src/animation/generators/inertia.ts#L103
I log the value of 't' and 'timeReachedBoundary'. I discovered that if t = 0
, the state.value
don't get update(target
and latest
and the last state.value
are the same).
https://github.com/framer/motion/blob/f425de919dc45c0a31f1c514a4a4c4fa8911ab67/packages/framer-motion/src/animation/generators/inertia.ts#L54
To address this issue, I added a condition to the code at line 103 in framer-motion/src/animation/generators/inertia.ts
, the condition is:
if (timeReachedBoundary !== undefined && t >= timeReachedBoundary) {
.
Then we can use spring to update the value.
This solution appears to work, but I don't understand why. Can you confirm if my solution is correct, @mattgperry?
Also encountering a similar issue, list elements are getting stuck mid-transition. Tested with [email protected]
, [email protected]
, and [email protected]
. Environment is [email protected]
, [email protected]
. Able to reproduce reliably by sorting the list in descending order via a manual insertion sort. Full code below.
import Head from "next/head";
import { Reorder } from "framer-motion";
import React from "react";
function List() {
const [items, setItems] = React.useState([0, 1, 2, 3]);
return (
<Reorder.Group axis="y" values={items} onReorder={setItems}>
{items.map((item) => (
<Reorder.Item
key={item}
value={item}
style={{
padding: "5px",
margin: "5px",
background: "#ccc",
border: "1px solid #005",
}}
>
{item}
</Reorder.Item>
))}
</Reorder.Group>
);
}
export default function Home() {
return (
<>
<Head>
<title>Test</title>
</Head>
<List />
</>
);
}
Could you please tell, are there any plans to have fixed this in nearest versions?
btw, 10.11.6 has the same issue with draggable div.
I am still experiencing this issue with 10.12.18
, any workaround yet?
Any blocker on merging those fixes? ☝️
I am still experiencing this issue with 10.16.4
Still experiencing this issue with 10.16.4
Still experiencing this with 10.16.4 + the sorting order gets messed up if you try to sort .
Ok. Tried it on Codesandbox and it works as expected on v10.9.1
@DavidAmunga In my timeline v10.16.5-alpha is the latest release. Did you mean v10.16.1?
Oops...sorry meant v10.9.1
I was having this same issue and it seems to be fixed now in 10.17.9 (was on 10.16.5 previously)
Working with 10.17.9 but not as elegant as the demo. For me the reorder works but the moving of other parts of the list on dragOver is not working atm.
I have the same problem, plus, the reorder is buggy in a way that I can't move up an item all the way by one drag action, if the reorder happened, an item will only move up by one. I saw the demo, and couldn't produce anything close to it.
"framer-motion": "v10.12.9"
is there a stable version that no one is seeing this