@maptiler/geocoding-control 1.4.2-dev.3 → 2.0.0-rc.1

package/style.css

@@ -1 +1 @@
-svg.svelte-d2loi5{display:block;fill:#e15042}li.svelte-ltkwvy.svelte-ltkwvy{text-align:left;cursor:default;display:grid;grid-template-columns:40px 1fr;color:var(--color-text);padding:8px 0;font-size:14px;line-height:18px;min-width:fit-content}li.svelte-ltkwvy.svelte-ltkwvy:first-child{padding-top:10px}li.svelte-ltkwvy.svelte-ltkwvy:last-child{padding-bottom:10px}li.selected.svelte-ltkwvy.svelte-ltkwvy{background-color:#f3f6ff}li.selected.svelte-ltkwvy.svelte-ltkwvy{animation:svelte-ltkwvy-backAndForth 5s linear infinite}li.selected.svelte-ltkwvy .primary.svelte-ltkwvy{color:#2b8bfb}li.svelte-ltkwvy>img.svelte-ltkwvy{align-self:center;justify-self:center;opacity:.75}.texts.svelte-ltkwvy.svelte-ltkwvy{padding:0 17px 0 0}.texts.svelte-ltkwvy>.svelte-ltkwvy{white-space:nowrap;display:block;min-width:fit-content}.primary.svelte-ltkwvy.svelte-ltkwvy{font-weight:600}.secondary.svelte-ltkwvy.svelte-ltkwvy{color:#aeb6c7;padding-left:4px}.line2.svelte-ltkwvy.svelte-ltkwvy{color:#aeb6c7}@keyframes svelte-ltkwvy-backAndForth{0%{transform:translate(0)}10%{transform:translate(0)}45%{transform:translate(calc(-100% + 270px))}55%{transform:translate(calc(-100% + 270px))}90%{transform:translate(0)}to{transform:translate(0)}}div.svelte-7cmwmc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;display:flex;align-items:center}svg.svelte-7cmwmc{animation:svelte-7cmwmc-rotate .8s infinite cubic-bezier(.45,.05,.55,.95)}@keyframes svelte-7cmwmc-rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}svg.svelte-gzo3ar.svelte-gzo3ar{display:block;fill:#6b7c93;stroke:#6b7c93}.list-icon.svelte-gzo3ar.svelte-gzo3ar{grid-row:1/3;align-self:center;margin:8px}.in-map.svelte-gzo3ar.svelte-gzo3ar{height:30px}.maplibregl-canvas-container .marker-selected{z-index:1}.maplibregl-canvas-container svg.svelte-gzo3ar path.svelte-gzo3ar,.leaflet-map-pane svg.svelte-gzo3ar path.svelte-gzo3ar{fill:#3170fe;stroke:#3170fe}.marker-selected svg.svelte-gzo3ar path.svelte-gzo3ar{fill:#98b7ff;stroke:#3170fe}.marker-reverse svg.svelte-gzo3ar path.svelte-gzo3ar{fill:silver;stroke:gray}.marker-interactive{cursor:pointer!important}.maptiler-gc-popup>.maplibregl-popup-content{padding:2px 8px}svg.svelte-en2qvf{display:block;fill:var(--color-icon-button)}circle.svelte-1aq105l{stroke-width:1.875;fill:none}path.svelte-1aq105l{stroke-width:1.875;stroke-linecap:round}svg.svelte-1aq105l{display:block;stroke:var(--color-icon-button)}form.svelte-1uvos7g.svelte-1uvos7g{font-family:Open Sans,Ubuntu,Helvetica Neue,Arial,Helvetica,sans-serif;position:relative;background-color:#fff;z-index:10;border-radius:4px;margin:0;transition:max-width .25s;box-shadow:0 2px 5px #33335926;--color-text:#444952;--color-icon-button:#444952}form.svelte-1uvos7g.svelte-1uvos7g,form.svelte-1uvos7g .svelte-1uvos7g,form.svelte-1uvos7g .svelte-1uvos7g:after,form.svelte-1uvos7g .svelte-1uvos7g:before{box-sizing:border-box}form.can-collapse.svelte-1uvos7g.svelte-1uvos7g{max-width:29px}form.can-collapse.svelte-1uvos7g input.svelte-1uvos7g::placeholder{transition:opacity .25s;opacity:0}form.svelte-1uvos7g.svelte-1uvos7g,form.svelte-1uvos7g.svelte-1uvos7g:focus-within,form.svelte-1uvos7g.svelte-1uvos7g:hover{width:270px;max-width:270px}form.svelte-1uvos7g input.svelte-1uvos7g::placeholder,form.svelte-1uvos7g:focus-within input.svelte-1uvos7g::placeholder,form.svelte-1uvos7g:hover input.svelte-1uvos7g::placeholder{opacity:1}input.svelte-1uvos7g.svelte-1uvos7g{font:inherit;font-size:14px;flex-grow:1;min-height:29px;background-color:transparent;color:#444952;white-space:nowrap;overflow:hidden;border:0;margin:0;padding:0}input.svelte-1uvos7g.svelte-1uvos7g:focus{color:#444952;outline:0;outline:none;box-shadow:none}ul.svelte-1uvos7g.svelte-1uvos7g,div.error.svelte-1uvos7g.svelte-1uvos7g,div.no-results.svelte-1uvos7g.svelte-1uvos7g{background-color:#fff;border-radius:4px;left:0;list-style:none;margin:0;padding:0;position:absolute;width:100%;top:calc(100% + 6px);overflow:hidden}ul.svelte-1uvos7g.svelte-1uvos7g{font-size:14px;line-height:16px;box-shadow:0 5px 10px #33335926}div.error.svelte-1uvos7g.svelte-1uvos7g,div.no-results.svelte-1uvos7g.svelte-1uvos7g{font:inherit;line-height:18px;font-size:12px;display:flex;gap:16px}div.error.svelte-1uvos7g.svelte-1uvos7g{padding:16px;font-weight:600;color:#e25041;background-color:#fbeae8}div.error.svelte-1uvos7g div.svelte-1uvos7g{flex-grow:1}div.error.svelte-1uvos7g svg{flex-shrink:0;width:20px;height:20px}div.error.svelte-1uvos7g button.svelte-1uvos7g{flex-shrink:0}div.error.svelte-1uvos7g button.svelte-1uvos7g>svg{width:13px;fill:#e25041}div.error.svelte-1uvos7g button.svelte-1uvos7g:hover svg,div.error.svelte-1uvos7g button.svelte-1uvos7g:active svg{fill:#444952}div.no-results.svelte-1uvos7g.svelte-1uvos7g{padding:14px 24px 14px 16px;font-weight:400;color:#6b7c93;box-shadow:0 5px 10px #33335926}div.no-results.svelte-1uvos7g svg{margin-top:4px;flex-shrink:0;width:20px;height:20px;width:30px;height:30px}.maplibregl-ctrl-bottom-left ul.svelte-1uvos7g.svelte-1uvos7g,.maplibregl-ctrl-bottom-right ul.svelte-1uvos7g.svelte-1uvos7g{top:auto;bottom:100%}button.svelte-1uvos7g.svelte-1uvos7g{padding:0;margin:0;border:0;background-color:transparent;height:auto;width:auto}button.svelte-1uvos7g.svelte-1uvos7g:hover{background-color:transparent}button.svelte-1uvos7g:hover svg,button.svelte-1uvos7g:active svg{fill:#2b8bfb}.input-group.svelte-1uvos7g.svelte-1uvos7g{display:flex;align-items:stretch;gap:7px;padding-inline:8px;border-radius:4px;overflow:hidden}.input-group.svelte-1uvos7g.svelte-1uvos7g:focus-within{outline:#2b8bfb solid 2px}.search-button.svelte-1uvos7g.svelte-1uvos7g{flex-shrink:0}.maplibregl-ctrl-geocoder:not(.maptiler-ctrl) .search-button svg{width:12px!important;transform:translate(.5px)}.clear-button-container.svelte-1uvos7g.svelte-1uvos7g{display:flex;display:none;position:relative;align-items:stretch}.clear-button-container.displayable.svelte-1uvos7g.svelte-1uvos7g{display:flex;flex-shrink:0}.maplibregl-ctrl-geocoder{position:relative;z-index:3}.maptiler-ctrl:not(:empty){box-shadow:none}.maptiler-ctrl .input-group.svelte-1uvos7g.svelte-1uvos7g{padding-inline:8px;border:white solid 2px}.maptiler-ctrl .input-group.svelte-1uvos7g.svelte-1uvos7g:focus-within{border:#2b8bfb solid 2px;outline:0;outline:none}.maptiler-ctrl form.can-collapse.svelte-1uvos7g.svelte-1uvos7g{max-width:33px}.maptiler-ctrl form.svelte-1uvos7g.svelte-1uvos7g,.maptiler-ctrl form.svelte-1uvos7g.svelte-1uvos7g:focus-within,.maptiler-ctrl form.svelte-1uvos7g.svelte-1uvos7g:hover{width:270px;max-width:270px}
+svg.svelte-d2loi5{display:block;fill:#e15042}li.svelte-ltkwvy.svelte-ltkwvy{text-align:left;cursor:default;display:grid;grid-template-columns:40px 1fr;color:var(--color-text);padding:8px 0;font-size:14px;line-height:18px;min-width:fit-content}li.svelte-ltkwvy.svelte-ltkwvy:first-child{padding-top:10px}li.svelte-ltkwvy.svelte-ltkwvy:last-child{padding-bottom:10px}li.selected.svelte-ltkwvy.svelte-ltkwvy{background-color:#f3f6ff}li.selected.svelte-ltkwvy.svelte-ltkwvy{animation:svelte-ltkwvy-backAndForth 5s linear infinite}li.selected.svelte-ltkwvy .primary.svelte-ltkwvy{color:#2b8bfb}li.svelte-ltkwvy>img.svelte-ltkwvy{align-self:center;justify-self:center;opacity:.75}.texts.svelte-ltkwvy.svelte-ltkwvy{padding:0 17px 0 0}.texts.svelte-ltkwvy>.svelte-ltkwvy{white-space:nowrap;display:block;min-width:fit-content}.primary.svelte-ltkwvy.svelte-ltkwvy{font-weight:600}.secondary.svelte-ltkwvy.svelte-ltkwvy{color:#aeb6c7;padding-left:4px}.line2.svelte-ltkwvy.svelte-ltkwvy{color:#aeb6c7}@keyframes svelte-ltkwvy-backAndForth{0%{transform:translate(0)}10%{transform:translate(0)}45%{transform:translate(calc(-100% + 270px))}55%{transform:translate(calc(-100% + 270px))}90%{transform:translate(0)}to{transform:translate(0)}}div.svelte-7cmwmc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;display:flex;align-items:center}svg.svelte-7cmwmc{animation:svelte-7cmwmc-rotate .8s infinite cubic-bezier(.45,.05,.55,.95)}@keyframes svelte-7cmwmc-rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}svg.svelte-gzo3ar.svelte-gzo3ar{display:block;fill:#6b7c93;stroke:#6b7c93}.list-icon.svelte-gzo3ar.svelte-gzo3ar{grid-row:1/3;align-self:center;margin:8px}.in-map.svelte-gzo3ar.svelte-gzo3ar{height:30px}.maplibregl-canvas-container .marker-selected{z-index:1}.maplibregl-canvas-container svg.svelte-gzo3ar path.svelte-gzo3ar,.leaflet-map-pane svg.svelte-gzo3ar path.svelte-gzo3ar{fill:#3170fe;stroke:#3170fe}.marker-selected svg.svelte-gzo3ar path.svelte-gzo3ar{fill:#98b7ff;stroke:#3170fe}.marker-reverse svg.svelte-gzo3ar path.svelte-gzo3ar{fill:silver;stroke:gray}.marker-interactive{cursor:pointer!important}.maptiler-gc-popup>.maplibregl-popup-content{padding:2px 8px}svg.svelte-en2qvf{display:block;fill:var(--color-icon-button)}circle.svelte-1aq105l{stroke-width:1.875;fill:none}path.svelte-1aq105l{stroke-width:1.875;stroke-linecap:round}svg.svelte-1aq105l{display:block;stroke:var(--color-icon-button)}form.svelte-bz0zu3.svelte-bz0zu3{font-family:Open Sans,Ubuntu,Helvetica Neue,Arial,Helvetica,sans-serif;position:relative;background-color:#fff;z-index:10;border-radius:4px;margin:0;transition:max-width .25s;box-shadow:0 2px 5px #33335926;--color-text:#444952;--color-icon-button:#444952}form.svelte-bz0zu3.svelte-bz0zu3,form.svelte-bz0zu3 .svelte-bz0zu3,form.svelte-bz0zu3 .svelte-bz0zu3:after,form.svelte-bz0zu3 .svelte-bz0zu3:before{box-sizing:border-box}form.can-collapse.svelte-bz0zu3.svelte-bz0zu3{max-width:29px}form.can-collapse.svelte-bz0zu3 input.svelte-bz0zu3::placeholder{transition:opacity .25s;opacity:0}form.svelte-bz0zu3.svelte-bz0zu3,form.svelte-bz0zu3.svelte-bz0zu3:focus-within,form.svelte-bz0zu3.svelte-bz0zu3:hover{width:270px;max-width:270px}form.svelte-bz0zu3 input.svelte-bz0zu3::placeholder,form.svelte-bz0zu3:focus-within input.svelte-bz0zu3::placeholder,form.svelte-bz0zu3:hover input.svelte-bz0zu3::placeholder{opacity:1}input.svelte-bz0zu3.svelte-bz0zu3{font:inherit;font-size:14px;flex-grow:1;min-height:29px;background-color:transparent;color:#444952;white-space:nowrap;overflow:hidden;border:0;margin:0;padding:0}input.svelte-bz0zu3.svelte-bz0zu3:focus{color:#444952;outline:0;outline:none;box-shadow:none}ul.svelte-bz0zu3.svelte-bz0zu3,div.error.svelte-bz0zu3.svelte-bz0zu3,div.no-results.svelte-bz0zu3.svelte-bz0zu3{background-color:#fff;border-radius:4px;left:0;list-style:none;margin:0;padding:0;position:absolute;width:100%;top:calc(100% + 6px);overflow:hidden}ul.svelte-bz0zu3.svelte-bz0zu3{font-size:14px;line-height:16px;box-shadow:0 5px 10px #33335926}div.error.svelte-bz0zu3.svelte-bz0zu3,div.no-results.svelte-bz0zu3.svelte-bz0zu3{font:inherit;line-height:18px;font-size:12px;display:flex;gap:16px}div.error.svelte-bz0zu3.svelte-bz0zu3{padding:16px;font-weight:600;color:#e25041;background-color:#fbeae8}div.error.svelte-bz0zu3 div.svelte-bz0zu3{flex-grow:1}div.error.svelte-bz0zu3 svg{flex-shrink:0;width:20px;height:20px}div.error.svelte-bz0zu3 button.svelte-bz0zu3{flex-shrink:0}div.error.svelte-bz0zu3 button.svelte-bz0zu3>svg{width:13px;fill:#e25041}div.error.svelte-bz0zu3 button.svelte-bz0zu3:hover svg,div.error.svelte-bz0zu3 button.svelte-bz0zu3:active svg{fill:#444952}div.no-results.svelte-bz0zu3.svelte-bz0zu3{padding:14px 24px 14px 16px;font-weight:400;color:#6b7c93;box-shadow:0 5px 10px #33335926}div.no-results.svelte-bz0zu3 svg{margin-top:4px;flex-shrink:0;width:20px;height:20px;width:30px;height:30px}.leaflet-bottom ul.options.svelte-bz0zu3.svelte-bz0zu3,.maplibregl-ctrl-bottom-left ul.options.svelte-bz0zu3.svelte-bz0zu3,.maplibregl-ctrl-bottom-right ul.options.svelte-bz0zu3.svelte-bz0zu3{top:auto;bottom:calc(100% + 6px)}button.svelte-bz0zu3.svelte-bz0zu3{padding:0;margin:0;border:0;background-color:transparent;height:auto;width:auto}button.svelte-bz0zu3.svelte-bz0zu3:hover{background-color:transparent}button.svelte-bz0zu3:hover svg,button.svelte-bz0zu3:active svg{fill:#2b8bfb}.input-group.svelte-bz0zu3.svelte-bz0zu3{display:flex;align-items:stretch;gap:7px;padding-inline:8px;border-radius:4px;overflow:hidden}.input-group.svelte-bz0zu3.svelte-bz0zu3:focus-within{outline:#2b8bfb solid 2px}.search-button.svelte-bz0zu3.svelte-bz0zu3{flex-shrink:0}.maplibregl-ctrl-geocoder:not(.maptiler-ctrl) .search-button svg{width:12px!important;transform:translate(.5px)}.clear-button-container.svelte-bz0zu3.svelte-bz0zu3{display:flex;display:none;position:relative;align-items:stretch}.clear-button-container.displayable.svelte-bz0zu3.svelte-bz0zu3{display:flex;flex-shrink:0}.maplibregl-ctrl-geocoder{position:relative;z-index:3}.maptiler-ctrl:not(:empty){box-shadow:none}.maptiler-ctrl .input-group.svelte-bz0zu3.svelte-bz0zu3{padding-inline:8px;border:white solid 2px}.maptiler-ctrl .input-group.svelte-bz0zu3.svelte-bz0zu3:focus-within{border:#2b8bfb solid 2px;outline:0;outline:none}.maptiler-ctrl form.can-collapse.svelte-bz0zu3.svelte-bz0zu3{max-width:33px}.maptiler-ctrl form.svelte-bz0zu3.svelte-bz0zu3,.maptiler-ctrl form.svelte-bz0zu3.svelte-bz0zu3:focus-within,.maptiler-ctrl form.svelte-bz0zu3.svelte-bz0zu3:hover{width:270px;max-width:270px}

package/svelte/FeatureItem.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: {
         feature: Feature;
         selected?: boolean;
-        showPlaceType: false | "always" | "ifNeeded";
+        showPlaceType: false | "always" | "ifNeeded" | "if-needed";
         missingIconsCache: Set<string>;
         iconsBaseUrl: string;
     };

package/svelte/GeocodingControl.svelte

@@ -61,8 +61,9 @@ export let reverseActive = enableReverse === "always";
 export let reverseButtonTitle = "toggle reverse geocoding";
 export let searchValue = "";
 export let showFullGeometry = true;
-export let showPlaceType = "ifNeeded";
+export let showPlaceType = "if-needed";
 export let showResultsWhileTyping = true;
+export let autocompleteTimeout = undefined;
 export let selectFirst = true;
 export let flyToSelected = false;
 export let markerOnSelected = true;
@@ -74,7 +75,7 @@ export let maxZoom = undefined;
 export let apiUrl = "https://api.maptiler.com/geocoding";
 export let fetchParameters = {};
 export let iconsBaseUrl = "https://cdn.maptiler.com/maptiler-geocoding-control/v" +
-    "1.4.2-dev.3" +
+    "2.0.0-rc.1" +
     "/icons/";
 export let adjustUrlQuery = () => { };
 export function focus() {
@@ -87,7 +88,7 @@ export function setQuery(value, submit = true, reverse = false) {
     searchValue = value;
     if (submit) {
         selectedItemIndex = -1;
-        handleOnSubmit();
+        handleSubmit();
     }
     else {
         handleInput(!reverse, reverse);
@@ -117,6 +118,7 @@ let error;
 let cachedFeatures = [];
 let abortController;
 let searchTimeoutRef;
+let autocompleteTimeoutRef;
 let focusedDelayed;
 let prevIdToFly;
 const missingIconsCache = new Set();
@@ -180,8 +182,13 @@ $: setTimeout(() => {
         searchValue = "";
     }
 });
+function isInAutocompleteTimeout() {
+    return !!autocompleteTimeoutRef;
+}
 $: if (selectFirst && listFeatures?.length) {
-    selectedItemIndex = 0;
+    if (!isInAutocompleteTimeout()) {
+        selectedItemIndex = 0;
+    }
 }
 // clear selection on edit
 $: {
@@ -190,17 +197,23 @@ $: {
     selectedItemIndex = -1;
 }
 $: selected = listFeatures?.[selectedItemIndex];
+$: if (selected) {
+    window.clearTimeout(autocompleteTimeoutRef);
+    autocompleteTimeoutRef = undefined;
+}
 $: if (mapController) {
     const coords = isQueryReverse(searchValue);
     mapController.setReverseMarker(coords ? [coords.decimalLongitude, coords.decimalLatitude] : undefined);
 }
-$: dispatch("select", selected);
-$: dispatch("pick", picked);
-$: dispatch("optionsVisibilityChange", focusedDelayed && !!listFeatures);
-$: dispatch("featuresListed", listFeatures);
-$: dispatch("featuresMarked", markedFeatures);
-$: dispatch("reverseToggle", reverseActive);
-$: dispatch("queryChange", searchValue);
+$: dispatch("select", { feature: selected });
+$: dispatch("pick", { feature: picked });
+$: dispatch("optionsvisibilitychange", {
+    optionsVisible: focusedDelayed && !!listFeatures,
+});
+$: dispatch("featureslisted", { features: listFeatures });
+$: dispatch("featuresmarked", { features: markedFeatures });
+$: dispatch("reversetoggle", { reverse: reverseActive });
+$: dispatch("querychange", { query: searchValue });
 $: if (mapController) {
     mapController.indicateReverse(reverseActive);
 }
@@ -244,11 +257,17 @@ onDestroy(() => {
         mapController.setMarkers(undefined, undefined);
     }
 });
-function handleOnSubmit(event) {
+function handleSubmit(event) {
     if (searchTimeoutRef) {
-        clearTimeout(searchTimeoutRef);
+        window.clearTimeout(searchTimeoutRef);
         searchTimeoutRef = undefined;
     }
+    if (autocompleteTimeoutRef) {
+        window.clearTimeout(autocompleteTimeoutRef);
+        autocompleteTimeoutRef = undefined;
+        search(searchValue, { exact: true });
+        return;
+    }
     if (selectedItemIndex > -1 && listFeatures) {
         picked = listFeatures[selectedItemIndex];
         searchValue =
@@ -280,7 +299,7 @@ function isQueryReverse(searchValue) {
         return false;
     }
 }
-async function search(searchValue, { byId = false, exact = false, } = {}) {
+async function search(searchValue, { byId = false, exact = false, appendSpace = false, } = {}) {
     error = undefined;
     abortController?.abort();
     const ac = new AbortController();
@@ -323,7 +342,7 @@ async function search(searchValue, { byId = false, exact = false, } = {}) {
             "/" +
             encodeURIComponent(isReverse
                 ? isReverse.decimalLongitude + "," + isReverse.decimalLatitude
-                : searchValue) +
+                : searchValue + (appendSpace ? " " : "")) +
             ".json?" +
             sp.toString();
         if (url === lastSearchUrl) {
@@ -481,21 +500,29 @@ function handleKeyDown(e) {
 }
 function handleInput(debounce = true, reverse = false) {
     error = undefined;
-    if (showResultsWhileTyping || reverse) {
-        if (searchTimeoutRef) {
-            clearTimeout(searchTimeoutRef);
-        }
-        if (searchValue.length < minLength) {
-            return;
-        }
-        const sv = searchValue;
-        searchTimeoutRef = window.setTimeout(() => {
-            search(sv).catch((err) => (error = err));
-        }, debounce ? debounceSearch : 0);
+    if (searchTimeoutRef) {
+        window.clearTimeout(searchTimeoutRef);
+        searchTimeoutRef = undefined;
     }
-    else {
+    if (autocompleteTimeoutRef) {
+        window.clearTimeout(autocompleteTimeoutRef);
+        autocompleteTimeoutRef = undefined;
+    }
+    if ((!showResultsWhileTyping && !reverse) ||
+        searchValue.length < minLength) {
         listFeatures = undefined;
-        error = undefined;
+        return;
+    }
+    const sv = searchValue;
+    searchTimeoutRef = window.setTimeout(() => {
+        searchTimeoutRef = undefined;
+        search(sv).catch((err) => (error = err));
+    }, debounce ? debounceSearch : 0);
+    if (!searchValue.endsWith(" ")) {
+        autocompleteTimeoutRef = window.setTimeout(() => {
+            autocompleteTimeoutRef = undefined;
+            search(sv, { appendSpace: true }).catch((err) => (error = err));
+        }, autocompleteTimeout);
     }
 }
 function pick(feature) {
@@ -513,7 +540,7 @@ function pick(feature) {
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <form
   tabindex="0"
-  on:submit|preventDefault={handleOnSubmit}
+  on:submit|preventDefault={handleSubmit}
   class:can-collapse={collapsed && searchValue === ""}
   class={className}
 >
@@ -584,6 +611,7 @@ function pick(feature) {
     </div>
   {:else if focusedDelayed && listFeatures?.length}
     <ul
+      class="options"
       on:mouseleave={() => {
         if (!selectFirst) {
           selectedItemIndex = -1;
@@ -726,10 +754,11 @@ div.no-results :global(svg) {
   height: 30px;
 }
 
-:global(.maplibregl-ctrl-bottom-left) ul,
-:global(.maplibregl-ctrl-bottom-right) ul {
+:global(.leaflet-bottom) ul.options,
+:global(.maplibregl-ctrl-bottom-left) ul.options,
+:global(.maplibregl-ctrl-bottom-right) ul.options {
   top: auto;
-  bottom: 100%;
+  bottom: calc(100% + 6px);
 }
 
 button {

package/svelte/GeocodingControl.svelte.d.ts

@@ -26,9 +26,10 @@ declare const __propDef: {
         reverseActive?: boolean;
         reverseButtonTitle?: string;
         searchValue?: string;
-        showFullGeometry?: boolean;
-        showPlaceType?: false | "always" | "ifNeeded";
+        showFullGeometry?: boolean | "polygon-with-marker";
+        showPlaceType?: false | "always" | "ifNeeded" | "if-needed";
         showResultsWhileTyping?: boolean;
+        autocompleteTimeout?: number | undefined;
         selectFirst?: boolean;
         flyToSelected?: boolean;
         markerOnSelected?: boolean;
@@ -48,17 +49,31 @@ declare const __propDef: {
         clearMap?: () => void;
     };
     events: {
-        featuresListed: CustomEvent<Feature<import("geojson").Geometry>[] | undefined>;
-        featuresMarked: CustomEvent<Feature<import("geojson").Geometry>[] | undefined>;
-        optionsVisibilityChange: CustomEvent<boolean>;
-        pick: CustomEvent<Feature<import("geojson").Geometry> | undefined>;
-        queryChange: CustomEvent<string>;
+        featureslisted: CustomEvent<{
+            features: Feature[] | undefined;
+        }>;
+        featuresmarked: CustomEvent<{
+            features: Feature[] | undefined;
+        }>;
+        optionsvisibilitychange: CustomEvent<{
+            optionsVisible: boolean;
+        }>;
+        pick: CustomEvent<{
+            feature: Feature | undefined;
+        }>;
+        querychange: CustomEvent<{
+            query: string;
+        }>;
         response: CustomEvent<{
             url: string;
             featureCollection: FeatureCollection;
         }>;
-        reverseToggle: CustomEvent<boolean>;
-        select: CustomEvent<Feature<import("geojson").Geometry> | undefined>;
+        reversetoggle: CustomEvent<{
+            reverse: boolean;
+        }>;
+        select: CustomEvent<{
+            feature: Feature | undefined;
+        }>;
     } & {
         [evt: string]: CustomEvent<any>;
     };