Buttons keep the "leaflet-active" class after mouse up (IE11)

[fnicollet]

Hi,

A little something that might have to do with pointer event handing for IE11. Try any map with a zoom component in IE11 like http://leafletjs.com/. Click the zoom buttons, they will keep the "leaflet-active" class, even after you pushed them.

This class should be removed when up.

This might have to do with this issue #2102 because the "_onUp" function is never called.

In Pointer.js, I believe there is an issue. in the function addPointerListenerEnd:
this._pointers is undefined so no touch id is sent to the event

It might lead to bigger issues, although i didn't experience any other bad effect

Fabien

[danzel]

Thanks for these IE11 reports.
We have a windows 8.1 touch device now, so I'll try look at these on Monday

[fnicollet]

Thanks Dave, much appreciated.
Multitouch seem to be broken as well, at least it doesn't work in the simulator when I try it. I have no touch device so that's the only way i can try it (TRANSITION seem to be false for some reason and basically the map is just stuck there)

Thanks,

[fnicollet]

Just tried it in IE11 Desktop, same behaviour, the class stays on the element. The #2102 fix doesn't change anything. I believe there is a deeper issue with touch events

[fnicollet]

The second fix in #2102 doesn't fix this bug unfortunately, the outline still stays.

[danzel]

Sent a PR #2111 that fixes this. Looks like there was some leftover code from when you tidied up draggable @mourner :)
Unless there is a reason this was being added in there? There doesn't seem to be any code that removes it except in tap, which pointer doesn't use.

Please give it a test @fnicollet

[mourner]

@danzel yep, you're totally right! Thanks a lot for figuring this out :)

[fnicollet]

@danzel just tried it, works :)

[fnicollet]

But the leaflet-active class is never set, even in Chrome. Is it really useful to keep leaflet-active?

.leaflet-container a.leaflet-active {
    outline: 2px solid orange;
    }

Because there is already a focus style with each browser (orange outline in Chrome, dotted outline in IE)

[mourner]

Hmm, it should be set here in theory... https://github.com/Leaflet/Leaflet/blob/master/src/map/handler/Map.Tap.js#L39-L41

[fnicollet]

Maybe I'm doing something wrong, but in leaflet-src.js, if i set it to:

L.Map.Tap = L.Handler.extend({
    addHooks: function () {
    alert(1);
        L.DomEvent.on(this._map._container, 'touchstart', this._onDown, this);
    },

No alert is shown, Chrome & IE. Also, when I hover the Zoom In button in IE, there is a weird padding on the "+" sign

[danzel]

Tap is only used on android and iOS.
When you finger down on the +/- buttons it shows.