search

clauderic / dnd-kit

The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
http://dndkit.com
MIT License
12.81k stars 640 forks source link

ERROR ResizeObserver loop completed with undelivered notifications. #1334

Open RafaelCENG opened 8 months ago

RafaelCENG commented 8 months ago

ERROR ResizeObserver loop completed with undelivered notifications at http://localhost:3000/static/js/bundle.js:315082:58

Happens when I drag an item inside my droppable area to sort them. I'm not using SortContext "@dnd-kit/core": "^6.1.0",

RafaelCENG commented 8 months ago

https://github.com/clauderic/dnd-kit/assets/45431116/267dc4fd-cca6-4af5-8a63-c945b8dbdd16

If i open my inspect first i can't see any error in the console. Also it doesnt show when inspect is opened.

Asgarrrr commented 8 months ago

I am observing the same type of error. As part of a project, I have a Kanban view to create; moving a card too quickly triggers this error :(

RafaelCENG commented 7 months ago

Anything about this one? Trying to create our dnd and its pretty annoying..

RafaelCENG commented 7 months ago

@Asgarrrr hi you found any solutions for fixing it?

Asgarrrr commented 7 months ago

@Asgarrrr hi you found any solutions for fixing it?

Hello!

I'm not sure if it's a proper solution per se, but I added a 10-millisecond throttle in my onDragOver event. I can't really say if that specifically fixed the issue because I made some other small adjustments and tests to address the problem.

const [ throttling, setThrottling ] = useState( false );

const onDragOver = useCallback(
   ( event: DragOverEvent ) => {
      if ( throttling ) return;

         ( code for handling cards )

      setThrottling( true );
      setTimeout( ( ) => setThrottling( false ), 10 );
   }
)