@maptiler/geocoding-control 2.0.1 → 2.1.0-rc1

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-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}
+svg.svelte-d2loi5{display:block;fill:#e15042}li.svelte-z7p9pp.svelte-z7p9pp{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;outline:0}li.svelte-z7p9pp.svelte-z7p9pp:first-child{padding-top:10px}li.svelte-z7p9pp.svelte-z7p9pp:last-child{padding-bottom:10px}li.picked.svelte-z7p9pp.svelte-z7p9pp{background-color:#e7edff}li.picked.svelte-z7p9pp .secondary.svelte-z7p9pp{color:#96a4c7;padding-left:4px}li.picked.svelte-z7p9pp .line2.svelte-z7p9pp{color:#96a4c7}li.selected.svelte-z7p9pp.svelte-z7p9pp{background-color:#f3f6ff}li.selected.svelte-z7p9pp.svelte-z7p9pp{animation:svelte-z7p9pp-backAndForth 5s linear infinite}li.selected.svelte-z7p9pp .primary.svelte-z7p9pp{color:#2b8bfb}li.selected.svelte-z7p9pp .secondary.svelte-z7p9pp{color:#a2adc7;padding-left:4px}li.selected.svelte-z7p9pp .line2.svelte-z7p9pp{color:#a2adc7}li.svelte-z7p9pp>img.svelte-z7p9pp{align-self:center;justify-self:center;opacity:.75}.texts.svelte-z7p9pp.svelte-z7p9pp{padding:0 17px 0 0}.texts.svelte-z7p9pp>.svelte-z7p9pp{white-space:nowrap;display:block;min-width:fit-content}.primary.svelte-z7p9pp.svelte-z7p9pp{font-weight:600}.secondary.svelte-z7p9pp.svelte-z7p9pp{color:#aeb6c7;padding-left:4px}.line2.svelte-z7p9pp.svelte-z7p9pp{color:#aeb6c7}@keyframes svelte-z7p9pp-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

@@ -1,8 +1,10 @@
-<script>export let feature;
-export let selected = false;
+<script>import { createEventDispatcher } from "svelte";
+export let feature;
+export let style = "default";
 export let showPlaceType;
 export let missingIconsCache;
 export let iconsBaseUrl;
+const dispatch = createEventDispatcher();
 const categories = feature.properties?.categories;
 let category;
 let imageUrl;
@@ -32,24 +34,51 @@ function handleImgError() {
 }
 </script>
 
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<li tabindex="0" data-selected={selected} class:selected on:mouseenter on:focus>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<li
+  tabindex="-1"
+  role="option"
+  aria-selected={style === "selected"}
+  aria-checked={style === "picked"}
+  class={style}
+  on:mouseenter
+  on:focus={() => dispatch("select", undefined)}
+  on:click={(ev) => {
+    // this is to trigger the event if we click on focused item
+    if (document.activeElement !== ev.target) {
+      dispatch("select", undefined);
+    }
+  }}
+>
   {#if imageUrl}
-    <img src={imageUrl} alt={category} on:error={() => handleImgError()} />
+    <img
+      src={imageUrl}
+      alt={category}
+      title={placeType}
+      on:error={() => handleImgError()}
+    />
   {:else if feature.address}
-    <img src={iconsBaseUrl + "housenumber.svg"} alt={placeType} />
+    <img
+      src={iconsBaseUrl + "housenumber.svg"}
+      alt={placeType}
+      title={placeType}
+    />
   {:else if feature.id.startsWith("road.")}
-    <img src={iconsBaseUrl + "road.svg"} alt={placeType} />
+    <img src={iconsBaseUrl + "road.svg"} alt={placeType} title={placeType} />
   {:else if feature.id.startsWith("address.")}
-    <img src={iconsBaseUrl + "street.svg"} alt={placeType} />
+    <img src={iconsBaseUrl + "street.svg"} alt={placeType} title={placeType} />
   {:else if feature.id.startsWith("postal_code.")}
-    <img src={iconsBaseUrl + "postal_code.svg"} alt={placeType} />
+    <img
+      src={iconsBaseUrl + "postal_code.svg"}
+      alt={placeType}
+      title={placeType}
+    />
   {:else if feature.id.startsWith("poi.")}
-    <img src={iconsBaseUrl + "poi.svg"} alt={placeType} />
+    <img src={iconsBaseUrl + "poi.svg"} alt={placeType} title={placeType} />
   {:else if isReverse}
-    <img src={iconsBaseUrl + "reverse.svg"} alt={placeType} />
+    <img src={iconsBaseUrl + "reverse.svg"} alt={placeType} title={placeType} />
   {:else}
-    <img src={iconsBaseUrl + "area.svg"} alt={placeType} />
+    <img src={iconsBaseUrl + "area.svg"} alt={placeType} title={placeType} />
   {/if}
 
   <span class="texts">
@@ -81,6 +110,7 @@ function handleImgError() {
   font-size: 14px;
   line-height: 18px;
   min-width: fit-content;
+  outline: 0;
 }
 li:first-child {
   padding-top: 10px;
@@ -88,6 +118,16 @@ li:first-child {
 li:last-child {
   padding-bottom: 10px;
 }
+li.picked {
+  background-color: #e7edff;
+}
+li.picked .secondary {
+  color: #96a4c7;
+  padding-left: 4px;
+}
+li.picked .line2 {
+  color: #96a4c7;
+}
 li.selected {
   background-color: #f3f6ff;
 }
@@ -97,6 +137,13 @@ li.selected {
 li.selected .primary {
   color: #2b8bfb;
 }
+li.selected .secondary {
+  color: #a2adc7;
+  padding-left: 4px;
+}
+li.selected .line2 {
+  color: #a2adc7;
+}
 li > img {
   align-self: center;
   justify-self: center;

package/svelte/FeatureItem.svelte.d.ts

@@ -3,14 +3,14 @@ import type { Feature, ShowPlaceType } from "./types";
 declare const __propDef: {
     props: {
         feature: Feature;
-        selected?: boolean;
+        style?: "selected" | "picked" | "default";
         showPlaceType: ShowPlaceType;
         missingIconsCache: Set<string>;
         iconsBaseUrl: string;
     };
     events: {
         mouseenter: MouseEvent;
-        focus: FocusEvent;
+        select: CustomEvent<undefined>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/svelte/GeocodingControl.svelte

@@ -40,6 +40,8 @@ export let apiKey;
 export let bbox = undefined;
 export let clearButtonTitle = "clear";
 export let clearOnBlur = false;
+export let clearListOnPick = false;
+export let keepListOpen = false;
 export let collapsed = false;
 export let country = undefined;
 export let debounceSearch = 200;
@@ -73,39 +75,65 @@ export let zoom = ZOOM_DEFAULTS;
 export let apiUrl = "https://api.maptiler.com/geocoding";
 export let fetchParameters = {};
 export let iconsBaseUrl = "https://cdn.maptiler.com/maptiler-geocoding-control/v" +
-    "2.0.1" +
+    "2.1.0-rc1" +
     "/icons/";
+/**
+ * @deprecated use `adjustUrl`
+ */
 export let adjustUrlQuery = () => { };
-export function focus() {
-    input.focus();
-}
+/**
+ * Adjust geocoding URL before the fetch.
+ */
+export let adjustUrl = () => { };
+/**
+ * Focus the search input box.
+ *
+ * @param options [FocusOptions](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+ */
+export function focus(options) {
+    input.focus(options);
+}
+/**
+ * Blur the search input box.
+ */
 export function blur() {
     input.blur();
 }
+/**
+ * Set the content of search input box.
+ *
+ * @param value text to set
+ * @param submit perform the search
+ */
 export function setQuery(value, submit = true, reverse = false) {
     searchValue = value;
     if (submit) {
         selectedItemIndex = -1;
-        handleOnSubmit();
+        handleSubmit();
     }
     else {
-        handleInput(!reverse, reverse);
+        handleInput(undefined, !reverse, reverse);
         setTimeout(() => {
             input.focus();
             input.select();
         });
     }
 }
+/**
+ * Clear search result list.
+ */
 export function clearList() {
     listFeatures = undefined;
     picked = undefined;
     selectedItemIndex = -1;
 }
+/**
+ * Clear geocoding search results from the map.
+ */
 export function clearMap() {
     markedFeatures = [];
     picked = undefined;
 }
-let focused = false;
 let listFeatures;
 let markedFeatures;
 let picked;
@@ -118,11 +146,10 @@ let abortController;
 let searchTimeoutRef;
 let focusedDelayed;
 let prevIdToFly;
+let focused = false;
 const missingIconsCache = new Set();
 const dispatch = createEventDispatcher();
-$: {
-    reverseActive = enableReverse === "always";
-}
+$: reverseActive = enableReverse === "always";
 $: if (pickedResultStyle !== "marker-only" &&
     picked &&
     !picked.address &&
@@ -132,14 +159,10 @@ $: if (pickedResultStyle !== "marker-only" &&
 }
 $: {
     if (mapController && picked && picked.id !== prevIdToFly && flyTo) {
-        if (!picked.bbox ||
-            (picked.bbox[0] === picked.bbox[2] && picked.bbox[1] === picked.bbox[3])) {
-            mapController.flyTo(picked.center, computeZoom(picked));
-        }
-        else {
-            mapController.fitBounds(unwrapBbox(picked.bbox), 50, computeZoom(picked));
+        goToPicked();
+        if (clearListOnPick) {
+            listFeatures = undefined;
         }
-        listFeatures = undefined;
         markedFeatures = undefined;
         selectedItemIndex = -1;
     }
@@ -155,7 +178,7 @@ $: if (!markerOnSelected) {
     mapController?.setFeatures(undefined, undefined, showPolygonMarker);
 }
 $: if (mapController && markerOnSelected && !markedFeatures) {
-    mapController.setFeatures(selected ? [selected] : undefined, undefined, showPolygonMarker);
+    mapController.setFeatures(selected ? [selected] : undefined, picked, showPolygonMarker);
     mapController.setSelectedMarker(selected ? 0 : -1);
 }
 $: if (markedFeatures !== listFeatures) {
@@ -165,7 +188,6 @@ $: if (mapController) {
     mapController.setFeatures(markedFeatures, picked, showPolygonMarker);
 }
 $: if (searchValue.length < minLength) {
-    picked = undefined;
     listFeatures = undefined;
     error = undefined;
     markedFeatures = listFeatures;
@@ -177,19 +199,16 @@ $: if (markedFeatures && mapController) {
 // close dropdown in the next cycle so that the selected item event has the chance to fire
 $: setTimeout(() => {
     focusedDelayed = focused;
-    if (clearOnBlur && !focused) {
+    if (clearOnBlur && !focusedDelayed) {
         searchValue = "";
     }
 });
-$: if (selectFirst && listFeatures?.length) {
+$: if (selectFirst &&
+    listFeatures?.length &&
+    selectedItemIndex == -1 &&
+    !picked) {
     selectedItemIndex = 0;
 }
-// clear selection on edit
-$: {
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    searchValue;
-    selectedItemIndex = -1;
-}
 $: selected = listFeatures?.[selectedItemIndex];
 $: if (mapController) {
     const coords = isQueryReverse(searchValue);
@@ -197,9 +216,9 @@ $: if (mapController) {
 }
 $: dispatch("select", { feature: selected });
 $: dispatch("pick", { feature: picked });
-$: dispatch("optionsvisibilitychange", {
-    optionsVisible: focusedDelayed && !!listFeatures,
-});
+$: optionsVisible =
+    !!listFeatures?.length && (focusedDelayed || keepListOpen);
+$: dispatch("optionsvisibilitychange", { optionsVisible });
 $: dispatch("featureslisted", { features: listFeatures });
 $: dispatch("featuresmarked", { features: markedFeatures });
 $: dispatch("reversetoggle", { reverse: reverseActive });
@@ -247,7 +266,8 @@ onDestroy(() => {
         mapController.setFeatures(undefined, undefined, false);
     }
 });
-function handleOnSubmit(event) {
+function handleSubmit(event) {
+    focused = false;
     if (searchTimeoutRef) {
         clearTimeout(searchTimeoutRef);
         searchTimeoutRef = undefined;
@@ -290,7 +310,13 @@ async function search(searchValue, { byId = false, exact = false, } = {}) {
     abortController = ac;
     try {
         const isReverse = isQueryReverse(searchValue);
-        const sp = new URLSearchParams();
+        const urlObj = new URL(apiUrl +
+            "/" +
+            encodeURIComponent(isReverse
+                ? isReverse.decimalLongitude + "," + isReverse.decimalLatitude
+                : searchValue) +
+            ".json");
+        const sp = urlObj.searchParams;
         if (language !== undefined) {
             sp.set("language", Array.isArray(language) ? language.join(",") : (language ?? ""));
         }
@@ -322,20 +348,20 @@ async function search(searchValue, { byId = false, exact = false, } = {}) {
         }
         sp.set("key", apiKey);
         adjustUrlQuery(sp);
-        const url = apiUrl +
-            "/" +
-            encodeURIComponent(isReverse
-                ? isReverse.decimalLongitude + "," + isReverse.decimalLatitude
-                : searchValue) +
-            ".json?" +
-            sp.toString();
+        adjustUrl(urlObj);
+        const url = urlObj.toString();
         if (url === lastSearchUrl) {
             if (byId) {
-                listFeatures = undefined;
+                if (clearListOnPick) {
+                    listFeatures = undefined;
+                }
                 picked = cachedFeatures[0];
             }
             else {
                 listFeatures = cachedFeatures;
+                if (listFeatures[selectedItemIndex]?.id !== selected?.id) {
+                    selectedItemIndex = -1;
+                }
             }
             return;
         }
@@ -350,7 +376,9 @@ async function search(searchValue, { byId = false, exact = false, } = {}) {
         const featureCollection = await res.json();
         dispatch("response", { url, featureCollection });
         if (byId) {
-            listFeatures = undefined;
+            if (clearListOnPick) {
+                listFeatures = undefined;
+            }
             picked = featureCollection.features[0];
             cachedFeatures = [picked];
         }
@@ -384,6 +412,9 @@ async function search(searchValue, { byId = false, exact = false, } = {}) {
                 });
             }
             cachedFeatures = listFeatures;
+            if (listFeatures[selectedItemIndex]?.id !== selected?.id) {
+                selectedItemIndex = -1;
+            }
             if (isReverse) {
                 input.focus();
             }
@@ -434,6 +465,18 @@ function zoomToResults() {
         }
     }
 }
+function goToPicked() {
+    if (!picked || !mapController) {
+        return;
+    }
+    if (!picked.bbox ||
+        (picked.bbox[0] === picked.bbox[2] && picked.bbox[1] === picked.bbox[3])) {
+        mapController.flyTo(picked.center, computeZoom(picked));
+    }
+    else {
+        mapController.fitBounds(unwrapBbox(picked.bbox), 50, computeZoom(picked));
+    }
+}
 function computeZoom(feature) {
     if (!feature.bbox ||
         (feature.bbox[0] !== feature.bbox[2] &&
@@ -462,22 +505,30 @@ function handleKeyDown(e) {
         return;
     }
     let dir = e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0;
-    if (dir) {
-        if (selectedItemIndex === (selectFirst ? 0 : -1) && dir === -1) {
-            selectedItemIndex = listFeatures.length;
-        }
-        selectedItemIndex += dir;
-        if (selectedItemIndex >= listFeatures.length) {
-            selectedItemIndex = -1;
-        }
-        if (selectedItemIndex < 0 && selectFirst) {
-            selectedItemIndex = 0;
-        }
-        e.preventDefault();
+    if (!dir) {
+        return;
+    }
+    input.focus();
+    focused = true;
+    e.preventDefault();
+    if (picked && selectedItemIndex === -1) {
+        selectedItemIndex = listFeatures.findIndex((listFeature) => listFeature.id === picked?.id);
+    }
+    if (selectedItemIndex === (picked || selectFirst ? 0 : -1) && dir === -1) {
+        selectedItemIndex = listFeatures.length;
+    }
+    selectedItemIndex += dir;
+    if (selectedItemIndex >= listFeatures.length) {
+        selectedItemIndex = -1;
+    }
+    if (selectedItemIndex < 0 && (picked || selectFirst)) {
+        selectedItemIndex = 0;
     }
 }
-function handleInput(debounce = true, reverse = false) {
+function handleInput(_, debounce = true, reverse = false) {
     error = undefined;
+    picked = undefined;
+    focused = true;
     if (showResultsWhileTyping || reverse) {
         if (searchTimeoutRef) {
             clearTimeout(searchTimeoutRef);
@@ -496,9 +547,25 @@ function handleInput(debounce = true, reverse = false) {
     }
 }
 function pick(feature) {
-    picked = feature;
-    searchValue = feature.place_name;
-    selectedItemIndex = -1;
+    if (picked && picked?.id === feature?.id) {
+        goToPicked();
+    }
+    else {
+        picked = feature;
+        searchValue = feature.place_name;
+    }
+}
+function handleMouseEnter(index) {
+    selectedItemIndex = index;
+}
+function handleMouseLeave() {
+    if (!selectFirst || picked) {
+        selectedItemIndex = -1;
+    }
+    // re-focus on picked
+    if (flyToSelected) {
+        goToPicked();
+    }
 }
 </script>
 
@@ -507,10 +574,8 @@ function pick(feature) {
   <MarkerIcon displayIn="list" />
 {/if}
 
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <form
-  tabindex="0"
-  on:submit|preventDefault={handleOnSubmit}
+  on:submit|preventDefault={handleSubmit}
   class:can-collapse={collapsed && searchValue === ""}
   class={className}
 >
@@ -524,8 +589,10 @@ function pick(feature) {
       bind:value={searchValue}
       on:focus={() => (focused = true)}
       on:blur={() => (focused = false)}
+      on:click={() => (focused = true)}
       on:keydown={handleKeyDown}
-      on:input={() => handleInput()}
+      on:input={handleInput}
+      on:change={() => (picked = undefined)}
       {placeholder}
       aria-label={placeholder}
     />
@@ -571,7 +638,7 @@ function pick(feature) {
         <ClearIcon />
       </button>
     </div>
-  {:else if !focusedDelayed}
+  {:else if !focusedDelayed && !keepListOpen}
     {""}
   {:else if listFeatures?.length === 0}
     <div class="no-results">
@@ -579,23 +646,25 @@ function pick(feature) {
 
       <div>{noResultsMessage}</div>
     </div>
-  {:else if focusedDelayed && listFeatures?.length}
+  {:else if listFeatures?.length && (focusedDelayed || keepListOpen)}
     <ul
       class="options"
-      on:mouseleave={() => {
-        if (!selectFirst) {
-          selectedItemIndex = -1;
-        }
-      }}
+      on:mouseleave={handleMouseLeave}
       on:blur={() => undefined}
+      on:keydown={handleKeyDown}
+      role="listbox"
     >
       {#each listFeatures as feature, i (feature.id + (feature.address ? "," + feature.address : ""))}
         <FeatureItem
           {feature}
           {showPlaceType}
-          selected={selectedItemIndex === i}
-          on:mouseenter={() => (selectedItemIndex = i)}
-          on:focus={() => pick(feature)}
+          style={selectedItemIndex === i
+            ? "selected"
+            : picked?.id === feature.id
+              ? "picked"
+              : "default"}
+          on:mouseenter={() => handleMouseEnter(i)}
+          on:select={() => pick(feature)}
           {missingIconsCache}
           {iconsBaseUrl}
         />

package/svelte/GeocodingControl.svelte.d.ts

@@ -8,6 +8,8 @@ declare const __propDef: {
         bbox?: BBox | undefined;
         clearButtonTitle?: string;
         clearOnBlur?: boolean;
+        clearListOnPick?: boolean;
+        keepListOpen?: boolean;
         collapsed?: boolean;
         country?: string | string[] | undefined;
         debounceSearch?: number;
@@ -39,8 +41,13 @@ declare const __propDef: {
         apiUrl?: string;
         fetchParameters?: RequestInit;
         iconsBaseUrl?: string;
-        adjustUrlQuery?: (sp: URLSearchParams) => void;
-        focus?: () => void;
+        /**
+           * @deprecated use `adjustUrl`
+           */ adjustUrlQuery?: (sp: URLSearchParams) => void;
+        /**
+           * Adjust geocoding URL before the fetch.
+           */ adjustUrl?: (url: URL) => void;
+        focus?: (options?: FocusOptions) => void;
         blur?: () => void;
         setQuery?: (value: string, submit?: boolean, reverse?: boolean) => void;
         clearList?: () => void;
@@ -86,7 +93,7 @@ export type GeocodingControlEvents = typeof __propDef.events;
 export type GeocodingControlSlots = typeof __propDef.slots;
 export default class GeocodingControl extends SvelteComponent<GeocodingControlProps, GeocodingControlEvents, GeocodingControlSlots> {
     get ZOOM_DEFAULTS(): Record<string, number>;
-    get focus(): () => void;
+    get focus(): (options?: FocusOptions) => void;
     get blur(): () => void;
     get setQuery(): (value: string, submit?: boolean, reverse?: boolean) => void;
     get clearList(): () => void;