disable panning when mouse is over react-leaflet-control

[alexanderfrey]

Thanks for this great extension ! I'm trying to scroll the content within the react-leaflet-control on mobile devices but instead the events seems to be passed to and consumed by the map. Is there a way to block passing those scroll and click events to the map ?

I crawled already through the whole react-leaflet github issues and stackoverflow but couldn't find an example that would work for me.

Help is very much appreciated

[jgimbel]

If I understand correctly. The control pane is not seeing the scroll event, but the map catches it, and scrolls. I will need to create an example folder to test this. Unfortunately I am traveling today and cannot work on this.

[alexanderfrey]

Yes, thats exactly what is happening. I have seen suggestions on github leaflet to register an event listener when mouse is entering custom control and to to call map.disablePan() within that event listener. That sounds very hacky to me and did not work reliably for me. What wonders me though is that only few people seem to complain about that issue. I looked into the zoom control code of react-leaflet which seems to block the events somehow but I could not find the reason for that. Thanks for your help in advance !!

[jgimbel]

I found how popup's catch the scroll event.

I think this is how you will want to handle scroll events.

import { DomEvent } from 'leaflet'
import  React, { Component } from 'react'
import Control from 'react-leaflet-control'

class CustomZoom extends Component {

  componentDidMount() {
    DomEvent
      .disableClickPropagation(this.container)
      .disableScrollPropagation(this.container)
  }

  refContainer(el) {
    this.container = el;
  }

  render() {
    <Control position={topright} >
      <div ref={::this.refContainer}> I am scrollable, and will not click on the map! </div>
    </Control>
  }
}

[NekoApocalypse]

I tried the code above, but got an Error.

The problem is: React does not guarantee ref callbacks to be called after componentDidMount(), So there is a chance that this.container() is still null when componentDidMount() is called.

Here is my code that eliminated the error for me (plus, no need to bind refContainer):

class StaticControl extends Component {
    constructor(props) {
      super(props);
      this.container = null;
  }

  refContainer = (element) => {
    this.container = element;
    if (element) {
      DomEvent
        .disableClickPropagation(element)
        .disableScrollPropagation(element);
    }
  }

  render() {
    return (
      <Control position="topleft">
        <div ref={this.refContainer}>
          I am scrollable and will not click on the map!
        </div>
      </Control>
    );
  }
}