ngx-drag-drop icon indicating copy to clipboard operation
ngx-drag-drop copied to clipboard

Clicking very fast while dragging something renders the entire dragged element unresponsive for any new clicks until re-rendered

Open SeraphCoding opened this issue 8 months ago • 1 comments

Describe the bug If you click very fast while dragging an element - the dragging stops and the entire element becomes unresponsive for any further mouse clicks. It is still accessible using tabindex, but any mouse interaction now fails until the element in question is re-rendered.

To Reproduce Will work with any draggable

Steps to reproduce the behavior:

  1. Declare an element a draggable. It doesn't matter if you also declare that very same element as the dndDragImageRef
  2. Start dragging said element - hold the drag for now
  3. Now click very fast (spamclick with the left mouse button), while the element is being dragged. Possibly make sure that you hover the dragged element over its original element while doing this. Keep doing this until the element is no longer draggable
  4. Any other element inside this element is now also no longer interactive (like checkboxes)

Expected behavior It just continues to trigger click handlers and drag handlers while doing this

Actual behavior The element and all child elements inside the draggable are no longer detecting ANY mouse clicks

Additional context The steps to reproduce are an extreme example, but this happens really often by accident if the draggable also contains a checkbox, where the user might want to click the checkbox or drag it or interacts with a long list of items where they select many of them with a checkbox and then drag them by accident instead.

#171 Would provide a workaround for this bug - since this issue happens because there is no attack-delay for a drag to start. Any microscopically small mouse movement could potentially trigger a drag, even if it was just meant to be a quick click.

SeraphCoding avatar Jun 24 '24 10:06 SeraphCoding