[bug] tap(click) event is still not working on Android (v 12-13) Chrome browser on Samsung/Pixel phones

[AnastasiiaMP]

I saw several issues like that, the last one with suppose fix was the following https://github.com/SortableJS/Sortable/issues/2136. But issue is still there on some phones like Samsung and Pixels, on One plus is working perfectly. From what is noticeable I can make a concussion that draggable event is being called, but tap/click event is never being called (we have tag with x button and click event on it), because as soon as draggable event is called the long text got text-overflow: ellipsis style, and this what exactly happening.

This problem is not reproducible in only one Mozilla Firefox browser, which uses its own rendering engine - GeckoView, all other browsers on Android (as Google Chrome, Microsoft Edge, Opera and Brave) use the Google Chrome rendering engine - Blink. It seems that the issue is reproducible only on the Google Chrome rendering engine - Blink

Thank you!

[PersonalityFox]

Hi

I spent a lot of time trying to figure out a similar situation. Somewhere in the issue they wrote how this can be fixed with 2 parameters, but it didn’t work for me:

filter: "input",
preventOnFilter: false,

In your case it look like this:

new Sortable(sortableList, {
    animation: 150,
    filter: "button",
    preventOnFilter: false,
});

Important! The click should be processed without bubbling. That is, it is your close button , and not the cross icon.

button > * {
pointer-events:none;
}

The same applies to the input element inside the label. A click on the label will be ignored and will not reach the input.

I puzzled over the latter for a couple of evenings, and in the end I managed to understand the reason.

Hope this helps someone.

[Clydinite]

@AnastasiiaMP adding a delay works for me.

Sortable.create(sortable, {
    animation: 150,
    delay: 100,
    delayOnTouchOnly: true,
    }
});