leafletControl autoSearch function wrong event.target, undefined query

[AlexandrePhilibert]

There seems to be an issue with the way event are handled in the leafletControl.

What I am doing :

constructor() {
        super();

        this._provider = new OpenStreetMapProvider();
        this._searchControl = new GeoSearchControl({
            provider: this._provider
        })

        // creating leaflet map here

        this._map.addControl(this._searchControl);
    }

As i am typing in the GeoSearchControl, keyup events are fired but the event.target used in the autoSearch function is not the input, resulting in undefined query.

I am using Lit-Element, Webpack and Leaflet v1.6.0

could the event.target be changed to event.originalTarget ?

[AlexandrePhilibert]

Well this fix is not working on chrome

[smeijer]

Do you have a repo somewhere so that I can debug this? So far I've been unable to reproduce this issue.

[smeijer]

Closing, as I'm unable to reproduce. Please let me know if it still exists.

[eElor]

Unfortunately, this is still an issue. I'm working with webcomponents and set up leaflet and geosearch within a "custom-map" webcomponent enclosed by a "custom-modal" webcomponent.

Upon "keyup", the event.target within the autoSearch method is incorrectly set to the outermost web component (custom-modal), which of course has no value attribute (this.searchElem.input.value). And leads to an "undefined" error. After playing a little around, I noticed that the error is coming from the debounce function used within the autoSearch method. This leads to this being other than the expected ones. Exchanging the arrow functions with normal ones, didn't help here.

My current workaround is to overwrite the autoSearch method and introduce an inner debounce:

class CusomMap extends HTMLElement {
    // ....
    const searchCtrl = new GeoSearchControl({
      provider: new OpenStreetMapProvider()
    });
    this.map.addControl(searchCtrl); // leaflet 

    // custom autoSearch to prevent "undefined" errors on autocomplete
    // bind, otherwise search will not find the provider selected
    const search = searchCtrl.autoSearch.bind(searchCtrl);
    searchCtrl.autoSearch = () => {};

    const searchInput = this.shadowRoot.querySelector(".leaflet-geosearch-bar input");

    let timer;

    searchInput.addEventListener("keyup", () => {
      // debounce
      clearTimeout(timer);
      timer = setTimeout(() => {
        // exchange real event with dummy object pointing to input element
        const e = { target: searchInput };
        search(e);
      }, 500);
    });

    // ....
}