BUG: cannot scroll tags with a mobile/touch screen

[360fun]

Hi! I integrated your script in my map and I love it! :)
Some users told me that they cannot scroll down the tags menu, because the popup closes when they try to scroll it down. I tested myself on Chrome Android and I can confirm the behaviour.

HOW TO REPRODUCE THE BUG

1. open the map from Chrome in a mobile device (touch screen) or with the Chrome mobile dev tool (it works similarly)
2. when you try to scroll down the tags you cannot do it: the pop closes and you end up dragging the map instead of the menu

[maydemirx]

I will check, but feel yourself free to send pull-requests

[gbiurr]

Hi.
I've been stuck with this problem too.
I found somewhere that modifying this (in line 441) of the leaflet-tag-filter-button.js

 } else {
            L.DomEvent.on(this._container, 'click', L.DomEvent.stopPropagation);
        }

to this:

} else {
            L.DomEvent.disableClickPropagation(this._container);
        }

will do the trick.

And thanks a lot, Mehmet, for this cool filter button.
I'll ask you some questions one of these days.
Regards.
G.

[360fun]

Awesome!!! 😄 Thanks for the fix 🌳
Did you made a commit?

[gbiurr]

Yep. Nice to see things working smoothly.
I actually had to disableClick and disableScroll to make it work properly. Just try it out.
No, I didn't make a commit. I don´t even think I know how to do it.
Regards.

[360fun]

just edit the file (GitHub forks it automatically) and send the changes! 😸
https://github.com/maydemirx/leaflet-tag-filter-button/blob/master/src/leaflet-tag-filter-button.js

yep, scrolling is missing, so it needs some more work 😛

[gbiurr]

Well, what works for me is this:

if (!L.Browser.touch) {
            L.DomEvent.disableClickPropagation(this._container);
            L.DomEvent.disableScrollPropagation(this._container);
        } else {
            L.DomEvent.disableClickPropagation(this._container);
            L.DomEvent.disableScrollPropagation(this._container);

Which is a bit weird, but runs great on every device.

[360fun]

basically just do:

L.DomEvent.disableClickPropagation(this._container);
L.DomEvent.disableScrollPropagation(this._container);

no idea if this can cause problems in some cases/devices... @maydemirx what do you think?

[maydemirx]

@360fun if you test on desktop browsers and test if ok. you can send pull-request.

[maydemirx]

Hi Francesco @360fun is there any update for this issue?

[360fun]

I didn't make a proper test and right now I don't have time to do it, so I have no idea if the fix can cause other problems. 🙄

[maydemirx]

basically just do:

L.DomEvent.disableClickPropagation(this._container);
L.DomEvent.disableScrollPropagation(this._container);

no idea if this can cause problems in some cases/devices... @maydemirx what do you think?

@360fun i fixed the issue with your suggestion. Everything seems ok. Thanks a lot.

[360fun]

Awesome, thanks to you! 🙏