Sortable
Sortable copied to clipboard
[bug] New event listeners are added every time multi-drag list is created
Describe the bug
When creating a Sortable list several times, there are event listeners (keyup, mouseup, and pointerup) added every time a list is created to handle Multi-Drag selection instead of only being created once globally.
To Reproduce Steps to reproduce the behavior:
-
Go to the linked Code sandbox and open it in a new window
-
Go to dev tools
-
Select body element
-
Check keyup event listeners

-
Click on 'Close/open Folder' to close it
-
Click again to open it
-
Reload the event listeners – now there's two: one for the element that no longer exists
-
Repeat steps 1-7 and notice there's another listener, or enter a number in the input and click 'Toggle Folder x times' to simulate clicking the button that many times. Every time the folder is opened, a new event listener is added
After opening 6 times
Expected behavior There's only one event listener that checks whether the multi-drag key is pressed.
(The expected behavior is what I see with other listeners, such as touchmove to capture movement – those only have one global listener instead of being created every time a Sortable list is created)
Actual: There's several event listeners (As title states, all of the event listeners that are created too often are from the Multi-Drag plugin)
Information
Versions - Look in your package.json for this information:
sortablejs = ^1.15.0 (latest release)
@types/sortablejs = ^1.15.0
Additional context
The same thing occurs with mouseup and pointerup listeners that select or deselect Sortable items.
In certain applications, the user may need to generate a list from JSON data, and then call Sortable.create() on that list. When a user needs to generate that list several times, i.e. refreshing a folder, this can be problematic. Each time, a new <ul> and Sortable get created, and these listeners get created.
Instead, there should be one global listener that listens for these events like there is with dragging elements from lists
If multidrag is not mounted, there's no `mouseup`, `keyup`, or `pointerup` event listeners
Reproduction codesandbox: https://codesandbox.io/s/beautiful-varahamihira-fn42hx?file=/src/index.js