search

SortableJS / Sortable

Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
https://sortablejs.github.io/Sortable/
MIT License
29.42k stars 3.69k forks source link

Click-disabling event listener remains attached to document after sort finishes #1937

Open dancoding opened 3 years ago

dancoding commented 3 years ago

PLEASE READ THE CONTRIBUTION GUIDELINES HERE!

Failure to comply may have your issue automatically closed.

Reproduction

Scenario

https://codesandbox.io/s/green-water-dq651?file=/src/index.js

Steps to Reproduce

Summary of steps if applicable.

  1. Make sure to test in Chrome or Edge. (For reasons I don't understand, the bug does not occur in Firefox.)

  2. Drag the lowest item ("eight") QUICKLY downward and release it.

  3. Click the "Click Me" button. Nothing will happen. (This is the bug.)

  4. Click the "Click Me" button again. This time, clicking the button will trigger an alert as it should.

Describe the bug

Your fix for Issue 1184 has an unintended consequence. In Line 1138, you add an event listener to the document that stops propagation on any click event if the variable "ignoreNextClick" holds the value "true."

In theory, the "ignoreNextClick" variable will get set to "false" the first time the _onDragStart event fires. However, it's possible for this event NEVER TO FIRE if the user drags a sortable item quickly out of the sortable area and releases it. In that case, the event listener is still attached to the document, and the first time the user clicks anything in the DOM, it won't respond.

It took me a couple of hours to figure out that it was Sortable JS causing this problem and not something else in my code. I hope you can spare other developers this pain!

Expected behavior

When I click a button (or anything else) in the DOM after performing a drag-and-drop, it should behave normally. I shouldn't have to click it twice thanks to the "ignoreNextClick" event listener getting left attached to the document. (Remember, this only happens in the circumstances described above, and when "forceFallback" is set to "true.")

Version

package version
sortablejs ^1.10.2-?
@types/sortablejs ^x.x.x-? || N/A

Additional Context

Let me know if anything isn't clear!

waynevanson commented 3 years ago

1184

Mihailoff commented 1 year ago

Workaround https://github.com/donmbelembe/vue-dragscroll/issues/61#issuecomment-1058266843

andrewheumann commented 1 week ago

A related issue: the disableNextClick value persists after a destroy() call, and the associated click listener can still intercept and cancel click events.