disable panning when mouse is over react-leaflet-control

[liveby]

disable panning when mouse is over react-leaflet-control

[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>
  }
}

[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 !!

[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>
    );
  }
}