motion icon indicating copy to clipboard operation
motion copied to clipboard

[BUG] Reordering randomly stuck

Open hexwit opened this issue 1 year ago • 19 comments

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

Sandbox

4. Steps to reproduce

Steps to reproduce the behavior:

  1. Reorder tabs with different speed and direction. Release mouse button randomly.
  2. 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 image 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)

hexwit avatar Apr 27 '23 10:04 hexwit

happening to me too, not just with tabs

yardenxr avatar May 01 '23 14:05 yardenxr

I confirmed this issue does NOT exist in 10.11 and does exist in 10.12.8

devonpaluso avatar May 06 '23 01:05 devonpaluso

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.

fightingcat avatar May 06 '23 18:05 fightingcat

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?

LeniWen avatar May 07 '23 09:05 LeniWen

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.

image
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 />
    </>
  );
}

sameersismail avatar May 11 '23 05:05 sameersismail

Could you please tell, are there any plans to have fixed this in nearest versions?

hexwit avatar May 16 '23 19:05 hexwit

btw, 10.11.6 has the same issue with draggable div.

hexwit avatar May 16 '23 20:05 hexwit

I am still experiencing this issue with 10.12.18, any workaround yet?

nick-keller avatar Jul 08 '23 07:07 nick-keller

Any blocker on merging those fixes? ☝️

nick-keller avatar Sep 01 '23 10:09 nick-keller

I am still experiencing this issue with 10.16.4

niefufeng avatar Sep 07 '23 07:09 niefufeng

Still experiencing this issue with 10.16.4

ekatzenstein avatar Sep 16 '23 00:09 ekatzenstein

Still experiencing this with 10.16.4 + the sorting order gets messed up if you try to sort .

CleanShot 2023-10-06 at 11 56 15

DavidAmunga avatar Oct 06 '23 08:10 DavidAmunga

Ok. Tried it on Codesandbox and it works as expected on v10.9.1

DavidAmunga avatar Oct 06 '23 09:10 DavidAmunga

@DavidAmunga In my timeline v10.16.5-alpha is the latest release. Did you mean v10.16.1?

macmillan78 avatar Oct 06 '23 10:10 macmillan78

Oops...sorry meant v10.9.1

image

DavidAmunga avatar Oct 06 '23 10:10 DavidAmunga

I was having this same issue and it seems to be fixed now in 10.17.9 (was on 10.16.5 previously)

westbrookdaniel avatar Jan 09 '24 05:01 westbrookdaniel

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.

MrVibe avatar Mar 01 '24 00:03 MrVibe

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"

MedDimessii avatar Apr 22 '24 15:04 MedDimessii

is there a stable version that no one is seeing this

mdennisonproofpoint avatar May 01 '24 01:05 mdennisonproofpoint