[BUG]Kanban: Dragging a card between boards causes client-side crash

[mshaheerz]

Bug Report: Kanban Drag Crash

Component: Kanban
Docs: https://reui.io/docs/kanban

---

Summary

Dragging a card from one board to another causes the application to crash when the card is held in between the boards (before dropping).

The error shown:
Application error: a client-side exception has occurred while loading reui.io (see the browser console for more information).

---

Steps to Reproduce

1. Open the Kanban component preview or use the Kanban component in your app.
2. Pick up a card from any board.
3. Drag it towards another board.
4. Pause/hold the card in the middle area between the boards (not over a drop zone).
5. The app crashes with a client-side exception.

---

🎥 Reproduction Video

Example:

screen-capture.webm

---

✅ Expected Behavior

The drag action should work normally without crashing, even when the card is hovered between boards.

---

❌ Actual Behavior

The application crashes and shows a client-side exception error.

---

[oziriemeka]

This is one of those problems where a dev will typically say to a project manager, it works on my computer, and the project manager will say but it doesn't seem to work on clients computer, from my investigation, this was what i got from Next error log

Error Type

Console Error

## Error Message
Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

at map ([native code]:null:null)

Next.js version: 15.5.7 (Webpack)

Error Type

Runtime Error

## Error Message
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Next.js version: 15.5.7 (Webpack)

By far, the most difficult thing was even re-creating the error, the error happens in an unpredictable manner on chrome and firefox, but happens constantly on Safari.

My opinion

When dragging a card and pausing in the “in-between” area, onDragOver fires rapidly. The handler tries to move the card in state on every hover tick even when the hover target isn’t valid so React keeps re-rendering until it hits “maximum update depth exceeded.” Thi, the space between the Kanban board it self is causing the problem.

The fixes that worked for me it to move item only on drop.

Step to recreate error

Reproduction step below works constantly on SAFARI ONLY

To re-create it, i will move a card item from the first board (for some wired reason must be first board) to the middle of the secound and third board slowly, then pause at the middle, if you move fast, you'll miss it, if it doesn't work, while holding the card, wiggle it between the middle of the secound and third card, the card item has to be exactly in the middle to trigger the error, while i would term this error as you find what you get ("Simply because it might not always be triggered, but offcourse in production, one can not always predict the default behaviour of users"), please see image below for more information.

Error shows for the first time only, and randomly

More information

On FIrefox and chrome reproducing the steps (Has unpredicatble behaviour) i.e, it will trigger the error on first visit in a firefox/crhome, and work well thereafter,

It seems to me that the issue is likely caused by the transitioning effect caused when a card is been moved from one board to another and some other type checking, i tried removing the transitioning effect and it worked just fine, however, the transitiong effect makes it look cool.

I have also tried updating the following , as i taught this might be a fundamental issue @dnd-kit/sortable: ^8.0.0, @dnd-kit/utilities: ^3.2.1, @dnd-kit/modifiers: ^6.0.1
Terrible ideal, i know, but better i try it to save someone else the trouble.

Chrome: Version 142.0.7444.176 (Official Build) (arm64)
Firefox: 145.0.2 (aarch64)
Safari: Version 18.6 (20621.3.11.11.3)

[smith911-tech]

Faced similar issue

one workaround is to move cards on onDragEnd (NOT onDragOver)- Not the best btw