Conflict with map.on('click', ...) event

[johan--]

I have a map on click function (which adds a marker and performs reverse geocoding), but any activity in the GeoSearch input or on the drop down triggers the map.on('click', ...) event.

Is there any known workaround for this?

[johan--]

Resolved by using var el = jQuery(".geosearch" ), then disabling click propagation.

[smeijer]

More a workaround than a solution. Thereby reopening.

[AceCat]

Having the same issue. It's hard for me to figure out exactly what's causing this to happen - even messing with the z-index to put the search-input far above the map does nothing to prevent the map onClick event from triggering. Are there any non-jquery work arounds? (I'm using it in React).

[LittleTwoCheng]

Here's Plain Js workaround I can think of: searchControl.getContainer().onclick = e => { e.stopPropagation(); }; You may use it on your React implementation too. ref: https://leafletjs.com/reference-1.3.2.html#control-getcontainer

[AceCat]

Thanks @LittleTwoCheng, I needed to get outside of the React headspace. That did the trick!

[sandykaur2008]

I am still having this issue - @LittleTwoCheng, I tried your fix for my react map component, as you can see here: https://github.com/sandykaur2008/world-map/blob/searchbar/client/src/components/map.js

However, the event still fires and the marker is still added...perhaps I am referencing searchControl.getContainer().onclick = e => { e.stopPropagation(); }; incorrectly? @AceCat, I see you say it works for you, would you mind letting me know how you reference it in React?

Thank you in advance.

[AceCat]

Hey @sandykaur2008, I created a function that I call in the componentDidMount stage of my map component. The component is included below. The relevant bit is at the very end, after I perform all my other search control options I added the e.stopPropagation line of code:

`

createSearchControl() {
const map = this.refs.map.leafletElement;
const searchLayer = L.layerGroup().addTo(map);

const searchControl = new GeoSearchControl({
  ref: "searchControl",
  provider: provider,
  showMarker: false,
  autoClose: true,
  retainZoomLevel: true,
  layer: searchLayer
});

map.addControl(searchControl);
map.on('geosearch/showlocation', function(e) {
  var pinIcon = L.icon({
    iconUrl: MapMakerBlue,
    iconSize:[14, 28]
  });
  let latlng = {lat: Number(e.location.y), lng: Number(e.location.x)}
  let coordinate = latlng
  let pin =
    <ExtendedMarker
      key={Math.random()}
      position={coordinate}
      icon={pinIcon}>
      <Popup>
        <div className="map-popup__label">
          <div className="map-popup__label-item">Latitude:</div>
          <div className="map-popup__label-item">{Number(e.location.y).toFixed(3)}</div>
        </div>
        <div className="map-popup__label">
          <div className="map-popup__label-item">Longitude:</div>
          <div className="map-popup__label-item">{Number(e.location.x).toFixed(3)}</div>
        </div>
        <Button
          label="Get Estimate"
          type="primary"
          onClick={() => {component.doSomething()}}
        />
      </Popup>
    </ExtendedMarker>
  component.setState({pin: pin})
  component.props.performAFunction(coordinate)
})

//This prevents us from dropping a pin behind the search container when we click on it
searchControl.getContainer().onclick = e => { e.stopPropagation(); };

}`

Hope this helps!

[sandykaur2008]

Ah, thank you so much @AceCat - this helped me finally solve the issue! Much appreciated.

[QauseenMZ]

If I try @AceCat solution in react, I get The left-hand side of an assignment expression may not be an optional property access. `componentDidMount() { const map : any = this.props.leaflet.map; map.addControl(this.leafletElement);

const containerDiv : any = this.leafletElement.getContainer(); /* To suppress control events from propagation */
L.DomEvent.disableClickPropagation(containerDiv);
this.createLeafletElement().getContainer()?.onclick = e => { e.stopPropagation(); };

}`

[smeijer]

Fixed in leaflet-geosearch v3.0.1. Sorry for the long wait.