BUG: Wrong drop target when dragging over/arround (Next.js 14 + Tailwind)

[lucarampi]

First of all, this is me package.json file:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@atlaskit/pragmatic-drag-and-drop": "^1.2.1",
    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
    "@atlaskit/pragmatic-drag-and-drop-flourish": "^1.1.0",
    "@atlaskit/pragmatic-drag-and-drop-live-region": "^1.0.6",
    "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.1",
    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "immer": "^10.1.1",
    "lucide-react": "^0.408.0",
    "next": "14.2.5",
    "react": "^18",
    "react-dom": "^18",
    "sass": "^1.77.8",
    "tailwind-merge": "^2.4.0",
    "tailwindcss-animate": "^1.0.7",
    "tiny-invariant": "^1.3.3"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.5",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

I started from the tree example on the official docs: https://codesandbox.io/s/h6jq8r?module=/example.tsx

Then I did the following steps:

1. Create Next.js project ´npx create-next-app my-app --typescript --tailwind´
2. Copy all files of the example and reorganize some of it
3. Removed all css props an replaced with TailwindCSS
   I did other things after this, but at this point, I was no longer working...

One thing that I noticed is that the extractInstruction() can get the write location to place the dragging element... sometimes...
In my model, I have a root element and items con only be placed inside it.
Demo: https://github.com/lucarampi/pragmatic-dnd-issues/tree/Issue%2392

The drop-indicator is going to the wrong place. If I start dragging a child with index N it applies the wrong padding to the drop-indicator -> Just created a new project and magically worked, no idea why.
Edit: About the drop-indicator, there was a "relative" in the wrong place

[lucarampi]

Here is a way to bypass, but is what I was able to acchive:

[alexreardon]

Hi there,

In order to debug this issue I will need a standalone example. Could you please provide a codesandbox, stackblitz or similiar?

[lucarampi]

Here is a codesandbox example.

Note: The MASTER branch is up-to-date and may differ slightly from where I started. Another branch was created for this specific issue, but it might be outdated. I recommend using the MASTER branch.

[lucarampi]

Codesandbox is not working. Here is a StackBlitz one.

[lucarampi]

Any updates?

[sijan67]

Has this issue been fixed? @alexreardon
Could you elaborate in which file you placed the bypass code to resolve this? @lucarampi
I am using React + TS + Fluent UI library for my project.