Skip to content

Close button in default geocoder propagates clicks to map #720

@DennisOSRM

Description

@DennisOSRM

Issue

When using the default geocoder from leaflet-routing-machine, clicking the close/delete button (with class .leaflet-routing-remove-waypoint) propagates the click event to the map layer. This causes unintended waypoint creation at the cursor position rather than cleanly deleting the waypoint entry.

Expected Behavior

Clicking the close button should only delete the waypoint entry without triggering any map interactions.

Actual Behavior

  1. Click the close button on a geocoder entry
  2. The waypoint is deleted
  3. A new waypoint is immediately created at the cursor position on the map

Root Cause

The close button's click event bubbles up to the map layer because the default geocoder markup doesn't prevent event propagation on the geocoder container or close button elements.

Workaround

Until this is fixed upstream, projects can apply a runtime monkey patch to stop click propagation on the geocoder container:

// Patch leaflet-routing-machine geocoder to stop click propagation
if (document.querySelector('.leaflet-routing-geocoders')) {
  const container = document.querySelector('.leaflet-routing-geocoders');
  if (container) {
    container.addEventListener('click', (e) => {
      e.stopPropagation();
    });
  }
}

Reference

This issue was encountered and worked around in the OSRM Frontend project: Project-OSRM/osrm-frontend#409

The fix prevents propagation at the container level while preserving the close button's deletion functionality.

Environment

  • leaflet-routing-machine: 3.2.12
  • leaflet-control-geocoder: ^3.3.1

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions