Bug: can't drag card to column

[kamre]

Summary:
Some cards can't be dragged to column in kanban view

Steps to reproduce the behavior:

1. Add Board => Roadmap
2. Select view By Sprint
3. Drag "Icons don't display" card to "SPRINT 1" column
4. Try to drag same card back to "SPRINT 2" column

Expected behavior:
Card should be in column "SPRINT 2" after dragging

Platform:

• Browser and version: Chrome 91
• OS and version: Windows 10

Additional context:
Looks like a regression in #583
@harshilsharma63 FYI

[chenilim]

Thanks @kamre. I am not able to repro this (on v0.8.0 macOS App and plugin). Could you try this on the latest release and attach a video?

Also, looks like #583 is a PR for the CreatedBy prop, was that what you intended to link to?

[kamre]

@chenilim here is the video from the latest release:

This is windows application from focalboard-win.zip and fresh start (database removed in Documents folder).

Same behaviour can be seen for focalboard-server-linux-amd64.tar.gz when it is downloaded and started in WSL2.

Regarding #583: if we download windows application for revision 16708e9 before this PR was merged from here the issue is not reproduced.

[kamre]

@chenilim @harshilsharma63 Regression happened during the transition from class to function component for Kanban.

In the class component there was an instance method onDropToColumn that was always the same and now with function component it is always a new closure function that is later passed into KanbanColumn and inside useDrop hook.

There are no dependencies for this useDrop hook and this leads to calls to the first version of closure for onDropToColumn which keeps the same data for boardTree.

Propose to fix this by adding dependecies to useDrop like this:

const KanbanColumn = React.memo((props: Props) => {
    const [{isOver}, drop] = useDrop(() => ({
        accept: 'card',
        collect: (monitor) => ({
            isOver: monitor.isOver(),
        }),
        drop: (item: Card, monitor) => {
            if (monitor.isOver({shallow: true})) {
                props.onDrop(item)
            }
        },
    }), [props.onDrop])   // <== added
   ...
}

[chenilim]

Thank you for the additional details @kamre! Could you help investigate @harshilsharma63? Thanks.

[harshilsharma63]

@kamre would you be able to try this out on the latest main branch? It seems to be working fine now.

[kamre]

@harshilsharma63 still reproducible on main now. Need to drop the card on column, not on the other card.

[harshilsharma63]

@kamre I was able to reproduce this and fix from your suggestion 🤘