Skip to content

Selecting does not work after calling .stop() and .start() #209

Description

@dbougan

Describe the bug
Hi @ThibaultJanBeyer, thank you for maintaining this great library! I recently created a prototype with v3 following the "Custom Drag and Drop" guided example. My use case is to implement a web file system with select/drag/drop functionality, so I need to handle drags outside of DragSelect. The issue is that once I resume DragSelect by calling .start(), I can no longer click/drag to select new items. I created a codepen with the following minor changes:

  1. I subscribe to the 'DS:start:pre' event and call .stop() when dragging begins
  2. I added an event listener for the 'mouseup' event, and call .start() when dragging has ended

To Reproduce
Steps to reproduce the behavior:

  1. Visit the codepen below
  2. Click on the white space and drag to select at least one item
  3. Click on the selected item(s) and attempt to drag (the console will indicate that DragSelect has stopped)
  4. Release the items (the console will indicate that DragSelect has started again)
  5. Try to select new items again, however DragSelect no longer responds

Expected behavior
After dragging and releasing an item, I should be able to drag/select new items

Code Example
https://codepen.io/dbougan/pen/abProMo?editors=1111

Desktop (please complete the following information):

Additional context
I spent a little time studying the code and believe the issue is in the Interaction module and the isInteracting flag. It seems that when the Interaction.stop() method is triggered by DragSelect.stop(), it should explicitly set isInteracting = false. Because when DragSelect.start() is subsequently called and a new selection drag is attempted, the Interaction._start() method can never get past this code: if (!this._canInteract(event)) return; since isInteracting is still true from before DragSelect.stop() was called.

I tested the theory by adding line 173 in the screenshot below, which seems to have resolved the issue for me. However this is probably a naive approach, so I am hoping you can provide feedback. I'd be happy to submit a PR once we get to the root cause.

Thank you for your time!

image

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions