Dragging blocks from the Inserter Library does not "cleanup" on drop

[kjohnson]

Description

When dragging a block from the Inserter Library and dropping the block into the Block List, the draggable component does not seem to reset properly resulting in a drag cursor when no longer dragging.

We have a workaround for this which listens to the dragend event and manually removes the is-dragging-components-draggable class from the <body/> tag, see https://github.com/impress-org/givewp/pull/7014.

Note: We are not able to reproduce this when using the WordPress Block Editor, but rather when using the @wordpress components.

Update: This seems to only be an issue when the blocks do not support multiple instances.

supports: {
    multiple: false,
},

Workaround

We have a temporary work around to reset the drag cursor by listening to the dragend event.

document.addEventListener('dragend', () => {
    // Reset the drag cursor.
    document.body.classList.remove('is-dragging-components-draggable');

    // Scroll the interface down by 1px to force a repaint and reset the popover position.
    document.getElementsByClassName('interface-interface-skeleton__body')[0].scrollBy(0,1);
});

Step-by-step reproduction instructions

1. Open the Inserter Library (sidebar)
2. Drag a block into the Block List
3. Drop the block on a dropzone

Screenshots, screen recording, code snippet

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

[JasonTheAdams]

An interesting detail to this is that the issue goes away if the sidebar is closed — which is the behavior of the post editor after a block is dropped. So if i drop a block and manually close the sidebar, the app returns to a usable state. It almost seems like the event of closing the block list triggers the cleanup.

[kjohnson]

Update: This seems to only be an issue when the blocks do not support multiple instances.

supports: {
    multiple: false,
},

[github-actions[bot]]

Hi, This issue has gone 30 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps. Thanks for helping out.

[Mamaduka]

Hi, @kjohnson

I can no longer reproduce the issue; I tested using the "More" block, which has multiple: false. The is-dragging-components-draggable class is successfully removed.