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

[schopra8]

1. Read the FAQs 👇

2. Describe the bug

Same bug as listed in #1579. Issue was marked as closed, but bug persists in latest version of the package (8.5.3).

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.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

Sandbox

4. Steps to reproduce

Steps to reproduce the behavior:

Try Dragging Reorder.Item
You will notice that while dragging you highlight another content of Reorder.Item
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

If applicable, add a video or screenshots to help explain the bug.

7. Environment details

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

OS: Mac OS Big Sur
Browser: Chrome
Version: Version 109.0.5414.87 (Official Build) (x86_64)

FAQs

Framer Motion won't install

Framer Motion 7+ uses React 18 as a minimum. If you can't upgrade React, install the latest version of Framer Motion 6.

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>

[Ambroos]

The only thing needed to fix this is to call event.preventDefault where you call dragControls.start(event).

      onPointerDown={(event) => {
        dragControls.start(event);
        event.preventDefault();
      }}

The exact same bugged sandbox from above with only this fix applied works great: https://codesandbox.io/s/framer-motion-5-drag-to-reorder-lists-with-drag-handle-forked-fegqmi?file=/src/Icon.tsx

[OlegWock]

@Ambroos thanks a lot! This bugged me for a few months (and yet I didn't even tried preventDefault, but now it looks obvious haha)