React Beautiful DND Multi-Drag is dragging all cards in the column to the next column even without checkbox selected on a card

Question

We have customized the React beautiful DND drag and drop so that when users do multi drag, it is triggered by them selecting a multiselect in the top of that specific column. Once the users select the multiselect option in that column, checkboxes will appear on top of each card. The expected behavior is to only move the checkmarked items to the next column.

Issue:

For validation and debugging we tried this and if only 1 card is checkmarked, it is correctly only moving the 1 item. When we only checkbox 2 items out of 5 items in the starting column, All items in the entire starting column are being dragged to the other column the user is dragging to.

• How do we solve this problem so that it doesn't drag anything that is not checkmarked in that specific starting column?

We've referenced the https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/patterns/multi-drag.md and all of these steps are followed Also referred to this and our ids are unique in the Draggable Context: react-beautiful-dnd draggables dragging everything

Also followed all of these steps:

To modify the behavior of react-beautiful-dnd's MultiDrag component to only drag items that are checkmarked, you'll need to make some changes to the implementation. Here's a step-by-step guide to achieving this:

1. Ensure that each draggable item has a corresponding isChecked property. This property should indicate whether the item is checkmarked or not.

2. In your component's state, maintain an array of the selected (checkmarked) items. Let's call this array selectedItems.

3. When an item's checkbox is clicked, update the selectedItems array accordingly. If the item is already in the array, remove it; otherwise, add it.

4. Within the DragDropContext, add an onDragStart callback to override the default MultiDrag behavior.

<DragDropContext onDragStart={handleDragStart}>
  {/* ... */}
</DragDropContext>

5. In the handleDragStart function, access the selected items from the selectedItems array and provide them as the draggableIds argument to the startMultiDrag function. This will restrict dragging to only the selected items.

const handleDragStart = (start, provided) => {
  const { draggableIds } = start;

  // Filter draggableIds based on selected items
  const selectedDraggableIds = draggableIds.filter(id =>
    selectedItems.includes(id)
  );

  // Call startMultiDrag with the filtered draggableIds
  startMultiDrag(selectedDraggableIds);
};

6. Finally, update the Droppable component where you want to drop the items to ensure that it accepts only the selected items. You can do this by using the isDropDisabled prop.

<Droppable
  droppableId="destination"
  isDropDisabled={selectedItems.length === 0}
>
  {/* ... */}
</Droppable>

With these modifications, only the selected items will be allowed to be dragged using the MultiDrag component.