How to prevent selection of a SortableJS item when clicking on one of its child elements?

Question

The Issue

I'm using SortableJS to build a draggable tree component. Which means each of my sortable-items has a toggle-arrow as a child element that opens and closes a sub-tree (if there is one).

I'm attempting to use stopPropagation() to prevent the selection of the parent sortable-item if the toggle-arrow is clicked, but it's not working.

It looks like this when closed:

And looks like this when open:

The blue highlight you see in the open state (the second image) is the styling I've chosen for the selectedClass option when using the multiDrag plugin.

This is illustrating that when I click on the toggle-arrow it results in the parent sortable-item being selected.

I don't want this to happen.

The Code

The code for an item in my SortableJS tree component looks like so (using Vue.js, and Pug syntax):

div.sortable-item
    div.content
        div.toggle-arrow(@click.stop="toggleTree($event)")
        div.icon
        div.title
    div.sub-tree

And then I've got a handler for the @click binding on my toggle-arrow element:

toggleTree = function($event) {
    $event.stopPropagation()
    /// Code for handling the sub-tree toggling goes here.
    /// The sub-tree toggling itself works just fine.
}

You can see that I'm declaring @click.stop as the event binding, which should stop the click event from bubbling up from the toggle-arrow child element, but it's not working.

I'm even attempting to use $event.stopPropagation within the handler. But, the event seems to continue to bubble, and thus the parent sortable-item element ends up in a selected state.

I've also tried declaring @click.native.stop as the event binding, but it simply prevents my toggleTree method from firing at all. I'm assuming there's another event handler somewhere within SortableJS that's interfering with the @click.native.stop binding.

Questions

How do I stop propagation of an event when a child element of my sortable-item is clicked?
How is selection handled by the multiDrag plugin? I dug through the code and saw that the select event is fired within the handler of the drop event of the sortable-item, but I'm confused by that. Why is the drop event handler being used to toggle selection of a sortable-item?

Thanks in advance for any light you may be able to shed on this.

score 6 · Accepted Answer · edited Jun 03 '20 at 05:09

6

Wrong Event

Looking at the source of SortableJS it seems that the event you want to stop from bubbling is not the click event, but rather the mouseup event.

The "Stuck" Drag Item Problem

As indicated in the comments of this answer, stopping propagation on the mouseup event causes an issue where the drag is started unintentionally, and the sortable-item becomes "stuck" to the pointer.

It seems that the "drag initiation" is triggered by either pointerdown, mousedown, or touchstart events, depending on the device.

It can be safely assumed that the pointerdown event is the one that does the triggering according to caniuse.com.

The Solution

So the actual way to solve this is to use a @pointerdown.stop event binding to trigger your toggleTree method without triggering either selection of the sortable-item, or the unintentional drag initiation.

div.sortable-item
    div.content
        div.toggle-arrow(@pointerdown.stop="toggleTree($event)")
        div.icon
        div.title
    div.sub-tree

edited Jun 03 '20 at 05:09

AJB

7,389
14
57
88

answered Jun 01 '20 at 09:52

多一点点爱

1,333
6
12

@ 多一点点爱 Good find! I've done an initial test and this works — kinda. It does stop the propagation so that it prevents the item from ending up in a selected state. But it also initiates a drag and the item ends up "stuck" to the cursor. But, since you answered the question at-hand the bounty is yours. – AJB Jun 02 '20 at 05:29
Can you add where you found the lines of code in the repo please. – AJB Jun 02 '20 at 05:35
1

Figured it out. By using `@pointerdown.stop` instead it solved my problem. I've updated this answer to reflect all the info. Thanks again for your help in figuring this out. It was driving me crazy for days :P – AJB Jun 03 '20 at 05:11
1

@AJB You have added a lot of details. My English is not very good. I am glad to solve your problem. – 多一点点爱 Jun 03 '20 at 06:57
Good job updating the answer, @AJB. – tao Jun 04 '20 at 02:58
Should probably make it clearer that `pointerdown.stop` is the solution. I read the first paragraph and though it was `mouseup`. – Matt Jun 24 '20 at 15:04

score 2 · Answer 2 · edited Jul 15 '22 at 22:51

2

Change

div.toggle-arrow(@click.stop="toggleTree($event)")

to

div.toggle-arrow(@click.native.stop="toggleTree($event)")

If all you did in toggleTree was stopPropagation, you could have changed it to:

div.toggle-arrow(@click.native.stop)

Docs.

In short, you're currently stopping propagation on any emitted clicks from the child component (a.k.a. custom Vue event, which doesn't actually need propagation stopped as it doesn't bubble by default). What you want to do is call event.stopPropagation() on the native click event.
An alternative would be to use:

div.toggle-arrow(@click.native="toggleTree($event)")

... and call .stopPropagation() inside toggleTree. Which is precisely what .stop modifier does.

edited Jul 15 '22 at 22:51

tony19

125,647
18
229
307

answered Jun 02 '20 at 03:33

tao

82,996
16
114
150

1

I should have mentioned in my original question that I've already tried `@click.native.stop`. I thought that would do the trick as well, but it simply stopped calling my `toggleTree` method altogether. My assumption is that there's another handler somewhere within `SortableJS` that's interfering with how `@click.native` is supposed to work. +1 for the answer though, it may help someone else. – AJB Jun 02 '20 at 05:22
Glad you were able to find the culprit. – tao Jun 02 '20 at 07:19

How to prevent selection of a SortableJS item when clicking on one of its child elements?

2 Answers2