[BUG] When dragging an Item on Reorder.Group all of the text will be highlighted when dragListener is false

[jeffrey125]

1. Read the FAQs 👇

2. Describe the bug

As the title says reordering a Reorder.Item in Reorder.Group It highlights the content while you drag it to other place.
Reorder.Item has a prop of dragListener to false because I want to have a drag trigger on it, and I followed all of the sample on the documentation and still to no luck it still highlights the content while dragging.

For the meantime I found a simple solution for it and that is to wrap the content in a span and have a style property of user-select:none, or you can remove the dragListener prop on the Reorder.Item but on the documentation it has a dragListener prop and it works fine

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/s/framer-reorder-animation-bug-bm21wl?file=/.gitignore

4. Steps to reproduce

Steps to reproduce the behavior:

1. Try Dragging Reorder.Item
2. You will notice that while dragging you highlight another content of Reorder.Item
3. Try highlighting the content of Reorder.Item and you will see you can highlight it

5. Expected behavior

Expected Behavior should be when dragging a Reorder.Item it shouldn't let you highlight the content while dragging it to another place.

6. Video or screenshots

framer-list-reorder-bug.mp4

7. Environment details

If applicable, let us know which OS, browser, browser version etc you're using.

OS: Windows 10 Pro
Browser: Brave
Version: 1.39.122

FAQs

height: "auto" is jumping

Animating to/from auto requires measuring the DOM. There's no perfect way to do this and if you have also applied padding to the same element, these measurements might be wrong.

The recommended solution is to move padding to a child element. See this issue for the full discussion.

Type error with AnimateSharedLayout

AnimateSharedLayout was deprecated in 5.0. Refer to the upgrade guide for instructions on how to remove.

Preact isn't working

Framer Motion isn't compatible with Preact.

AnimatePresence isn't working

Have all of its immediate children got a unique key prop that remains the same for that component every render?

// Bad: The index could be given to a different component if the order of items changes
<AnimatePresence>
  {items.map((item, index) => <Component key={index} />)}
</AnimatePresence>

// Good: The item ID is unique to each component
<AnimatePresence>
  {items.map((item, index) => <Component key={item.id} />)}
</AnimatePresence>

Is the AnimatePresence correctly outside of the controlling conditional? AnimatePresence must be rendered whenever you expect an exit animation to run - it can't do so if it's unmounted!

// Bad: AnimatePresence is unmounted - exit animations won't run
{isVisible && (
  <AnimatePresence>
    <Component />
  </AnimatePresence>
)}

// Good: Only the children are unmounted - exit animations will run
<AnimatePresence>
  {isVisible && <Component />}
</AnimatePresence>

[jeffrey125]

Closing this issue now because I found a similar issue #1518

According to @Systemcluster:

Note that this only appears to be the case when StrictMode is used and in development mode. This does not seem to affect production builds.

[Gnadii]

hey @jeffrey125
can you tell me how to get rid of this jumping behaviour you also seem to have in your example?
Thanks in advance

[jeffrey125]

Hey @Gnadii that weird jumping behaviour you experience when reordering was only on dev mode but when you ship your app into prod mode it will act as normal. You can see here on my sample todo Todo-list

[Gnadii]

ah you are right :D works for me as well.
Thanks!

[Jasonkoolman]

Managed to solve this issue locally by upgrading dependencies. For react 18 /w @chakra-ui/react 2 I had to upgrade framer-motion to its latest version (currently 7.5.3)

[jeffrey125]

Managed to solve this issue locally by upgrading dependencies. For react 18 /w @chakra-ui/react 2 I had to upgrade framer-motion to its latest version (currently 7.5.3)

Thats great @Jasonkoolman but this issue has been already solved 2 months ago #1643

[schopra8]

@jeffrey125 I was trying out today with the latest version of the package (8.5.0) and React 18 (18.2.0) (sandbox attached here).

Any idea as to what might be wrong? (user error, package compatibility error, or something else)