Prevent flashing drop indicator between two nearest list item

[zmirnes]

How to prevent drop indicator flashing when I drag item between list items?

https://github.com/user-attachments/assets/791e0396-b6d7-4406-86f9-ee2004dd6f6e

[michaelabrahamian]

Hey @zmirnes, can you please share a reproduction environment, such as a Codesandbox? Otherwise it's a bit difficult for us to help you :)

[declan-warn]

If the flash is because of gaps between drop targets then stickiness could prevent this: https://atlassian.design/components/pragmatic-drag-and-drop/core-package/drop-targets#getissticky

dropTargetForElements({
    element: myElement,
    getIsSticky: () => true,
});

[zmirnes]

Today I will share a reproduction environment to show what is problem.

[piecyk]

I also noticed this issue, seems to occur more in React 19, my current workaround is

onDragLeave() {
  // To prevent flickering drop inidcatior when dragging over the item
  requestAnimationFrame(() => {
    setState(idleState)
  })
},

[username14415]

the same problem I use the code from the examples: https://atlassian.design/components/pragmatic-drag-and-drop/examples Tree

I also use the latest react > 19 getIsSticky: () => true, and requestAnimationFrame does not work

[jakub-gawlik]

If the flash is because of gaps between drop targets then stickiness could prevent this: https://atlassian.design/components/pragmatic-drag-and-drop/core-package/drop-targets#getissticky

dropTargetForElements({ element: myElement, getIsSticky: () => true, });

This is what I was looking for, thanks!

[Krish-Das]

Neither the getIsSticky() nor the raf() works for me. I spent my 3 days just on this bug; still finding solution.

The examples are so complicated and convoluted that it is very hard to reduce the logic from them.