Leaflet: Window scrolls on first click

[ansjob]

I have an issue which causes different problems in different browsers.
I create a simple map and added a few markers, and when I click anywhere in the map the following happens depending on which browser I use:

• Chrome 23: The window scrolls vertically down to center the mouse pointer
• Firefox 17: The popup for the marker only fades in "half way"
• IE 8: The map enters some "dragging" mode and follows the cursor just like when clicking and dragging the map, this does not end until I click again (probably when there's an "on up" event).

The code is fairly integrated into my project, so it's a bit difficult to extract something that'll be useful to you guys, I'm just looking for a pointer in the right direction of where the problem could lie.
Thanks!

[ansjob]

I also noticed that if I do

_map.on("click", function(ev) {console.log(ev)});

, it misses the first click. This is probably related.

[danzel]

Do you have something in your code that is listening to mouse down/up?
Sounds like the bug is something in your code, but I have no idea what.
Does it make a JS error in firefox?

[ansjob]

I can't seem to find a reason for this bug in my code, and the same symptoms appear on http://www.mapsmarker.com/ (in IE and Chrome). It also appears that this only happens when the entire map canvas is not in view when the first click is fired.

[ansjob]

I was able to reproduce this in a jsfiddle:

http://jsfiddle.net/hhj6e/7/

Hopefully you understand what I mean.

[mourner]

Hmm, my guess is that it's the default browser behavior — when an element gets focus, it scrolls the window so that it's fully in the view. Need to check this to confirm.

You can of course fix this by disabling keyboard navigation (keyboard: false in map options) but that's not a very good option.

[ansjob]

Yeah, that "solves" the issue in chrome, but the half-way fade-in is still present in Firefox, and frankly, looks more buggy than the jump in Chrome.

[normelton]

Noticed the same thing. And it seems that evt.originalEvent.preventDefault() doesn't help either.

[normelton]

Here's a dirty dirty hack that resolves the problem:

L.Map.addInitHook(function() {
    return L.DomEvent.off(this._container, "mousedown", this.keyboard._onMouseDown);
});

[mourner]

Should be fixed now (even with keyboard enabled), please try this out.

[tjwebb]

Still broken as of 0.5.1

[mourner]

@tjwebb it's a master version fix

[tomasfejfar]

I still experience this issue with bower's v0.7.3 (that should already have the patch, right?) - on click the map scrolls content up and disabling keyboard access fixes the issue.

[tomasfejfar]

It's fixed on master. But the commit b61b7b4 shows that's in tag 0.7.3...

[nilgundag]

This is still an issue on Chrome as of today ( 14/05/15 ).
As noted by a comment in commit b61b7b4 by @Matheo13, removing this._map._container.focus(); line (7743 in leaflet-src 0.7.3) fixes the bug.

[mourner]

@nilguncelik it's a master version fix (2).

[slako]

I saw something same issue in 1.0.3. My page scrolling up when I clicked the map after popup.
No such issue in 0.7.7.
Issue going off when I commented string #12077:
window.scrollTo(left, top);

[perliedman]

@slako this is an old and closed issue. If you believe you have found a similar issue, please open a new one, clearly stating the problem, and the platform you're seeing it on, and preferably also an example reproducing it.

[sumer9999]

Hi Folks, I still faced this issue. I added ID to the map by passing prop => id='mapDiv'

then in React hooks adding below effect
useEffect(() => {
document.getElementById('mapDiv').focus();
});