Drag and Drop Causes Flashing and Disappearing Cards

[Bonapara]

Current Behavior

1. I grab the "Twitch" card.
   

2. I drag the card between "VMware" and "HP." The "Twitch" card disappears from the right column.
   

3. When I release the click, the card is added to the left column but is displayed again in the right column.
   

4. The card disappears from the left column, even though we want to drag it there.
   

5. The card disappears from the right column and finally appears in the left column.
   

Full Behavior in Video:

CleanShot.2024-06-24.at.15.31.13.mp4

Desired Behavior

Prevent any flashing when dragging and dropping a card to another column.

[greptile-apps]

To resolve the flashing and disappearing cards issue during drag-and-drop, follow these steps:

1. Locate Drag-and-Drop Handling:

   • RecordBoard component: frontend/src/components/RecordBoard/RecordBoard.tsx
   • RecordBoardColumnCardsContainer component: frontend/src/components/RecordBoard/RecordBoardColumnCardsContainer.tsx

2. Update State Management:

   • Ensure the state updates correctly during the drag-and-drop lifecycle. Specifically, check the onDragStart, onDragOver, onDrop, and onDragEnd handlers.

3. Modify RecordBoard.tsx:

   • Ensure the card being dragged is properly managed. Example:

     const handleDragStart = (event, cardId) => {
       event.dataTransfer.setData('cardId', cardId);
       setDraggingCardId(cardId);
     };
     const handleDrop = (event, columnId) => {
       const cardId = event.dataTransfer.getData('cardId');
       // Update state to reflect card movement
       moveCardToColumn(cardId, columnId);
       setDraggingCardId(null);
     };

4. Modify RecordBoardColumnCardsContainer.tsx:

   • Ensure the card is rendered correctly during drag-and-drop. Example:

     const RecordBoardColumnCardsContainer = ({ columnId, cards }) => {
       return (
         <div onDrop={(e) => handleDrop(e, columnId)} onDragOver={(e) => e.preventDefault()}>
           {cards.map(card => (
             <Card key={card.id} card={card} draggable onDragStart={(e) => handleDragStart(e, card.id)} />
           ))}
         </div>
       );
     };

5. Ensure Consistent State:

   • Verify that the state reflects the card's position accurately throughout the drag-and-drop process to prevent flashing and disappearing issues.

References

[rksingh2001]

Can I get assigned to this issue?

[Bonapara]

Sure @rksingh2001, thanks for contributing!

[rksingh2001]

@Bonapara I think you forgot to assign me :)

[Bonapara]

done, Sorry 😅