SortableList handleSelector bug

[orestis]

Hello,

It seems like the code for handleSelector only works if the selector you pick is the deepest one. For example:

<ul class="ink-sortable-list" data-handle-selector=".drag-handle">
    <li><div class="drag-handle"><img src="someimage.jpg"></div>Content 1</li>
    <li><div class="drag-handle"><img src="someimage.jpg"></div>Content 2</li>
    <li><div class="drag-handle"><img src="someimage.jpg"></div>Content 2</li>
</ul>

The above code would fail, whereas specifying data-handle-selector="img" would work.

It seems the issue is this snippet::

        if(this._options.handleSelector && !Selector.matchesSelector(ev.target, this._options.handleSelector)) { return; }

The target of the event might be deeper than our selector. I'm not familiar with Inks internals, but it doesn't seem this traverses up the tree to locate the selector.

[fabiosantoscode]

I noticed that last week as I wrote Ink docs and it's on my to-do list for Ink.

As a workaround, you can select your deepest element (the image in this case) for now.

[orestis]

Thanks. Yes, I'm using that workaround now (actually doing ".drag-handle img" to be more specific). Perhaps related, I need to set draggable=false to the image because the browser would try to browse that out. Is there a way for Ink to do this automatically ?

[fabiosantoscode]

I don't think it's in scope for the sortable list to solve that, nor is it very useful. That's behaviour specific for images and links, and drag handles are mostly icons.

[mariomc]

If you want, you can try to disable dragging with CSS having a selector similar to this:

.drag-handle img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

Granted, it won't work in some older browsers but depending on what you want to accomplish, might be worth the shot.

[fabiosantoscode]

Status update: @suskind has worked and will submit a bunch of improvements for SortableList, and fixing this (the original issue) is postponed to avoid merge conflicts. Give it a week or so.

[fabiosantoscode]

Thanks for reporting this. Closed in f164318