From 4fac809c9b3bad38f5b0a1e9dd3e477856bf1c8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20=C5=BDdila?= <martin.zdila@maptiler.com>
Date: Thu, 19 Dec 2024 09:56:17 +0100
Subject: [PATCH] Added clearListOnPick and keepListOpen options; improved UX
 (#73)

* implemented `clearListOnPick` option

* implemented `keepListOpen`

* improved UX

* fixed react events

* fixed UX

* changed styles for picked item in the list

* improved UX
---
 deno.lock                    |  56 +++++++++++
 examples/react/main.tsx      |  52 +++++++++-
 examples/react/style.css     |   4 +
 index.html                   |   6 +-
 src/FeatureItem.svelte       |  46 ++++++++-
 src/GeocodingControl.svelte  | 188 ++++++++++++++++++++++-------------
 src/leaflet-controller.ts    |   6 +-
 src/maplibregl-controller.ts |   6 +-
 src/openlayers-controller.ts |   8 +-
 src/react.ts                 |  12 ++-
 src/types.ts                 |  16 ++-
 11 files changed, 315 insertions(+), 85 deletions(-)
 create mode 100644 deno.lock

diff --git a/deno.lock b/deno.lock
new file mode 100644
index 0000000..7056642
--- /dev/null
+++ b/deno.lock
@@ -0,0 +1,56 @@
+{
+  "version": "4",
+  "redirects": {
+    "https://cdn.skypack.dev/chroma-js": "https://cdn.skypack.dev/new/chroma-js@v3.1.2/dist=es2019",
+    "https://cdn.skypack.dev/new/chroma-js@v3.1.2/dist=es2019": "https://cdn.skypack.dev/error/build:chroma-js@v3.1.2-QwkMr4VCpNO0CLkbGUyZ"
+  },
+  "remote": {
+    "https://cdn.skypack.dev/error/build:chroma-js@v3.1.2-QwkMr4VCpNO0CLkbGUyZ": "97aee30af87a5f6905a6af1a3eb1ed523426de337cf7d92ed3604a6b289eca8b"
+  },
+  "workspace": {
+    "packageJson": {
+      "dependencies": [
+        "npm:@maptiler/sdk@^2.5.0",
+        "npm:@sveltejs/package@^2.3.7",
+        "npm:@sveltejs/vite-plugin-svelte@^3.1.2",
+        "npm:@tsconfig/svelte@^5.0.4",
+        "npm:@turf/bbox@^7.1.0",
+        "npm:@turf/clone@^7.1.0",
+        "npm:@turf/difference@^7.1.0",
+        "npm:@turf/flatten@^7.1.0",
+        "npm:@turf/union@^7.1.0",
+        "npm:@types/geojson@^7946.0.15",
+        "npm:@types/leaflet@^1.9.15",
+        "npm:@types/node@^22.10.1",
+        "npm:@types/react-dom@^19.0.2",
+        "npm:@types/react@^19.0.1",
+        "npm:concurrently@^9.1.0",
+        "npm:dotenv@^16.4.7",
+        "npm:eslint-plugin-svelte@^2.46.1",
+        "npm:eslint@^9.16.0",
+        "npm:esm-env@^1.2.1",
+        "npm:geo-coordinates-parser@^1.7.4",
+        "npm:globals@^15.13.0",
+        "npm:husky@^9.1.7",
+        "npm:leaflet@^1.9.4",
+        "npm:lint-staged@^15.2.11",
+        "npm:maplibre-gl@^4.7.1",
+        "npm:ol@10.3",
+        "npm:prettier-plugin-organize-imports@^4.1.0",
+        "npm:prettier-plugin-svelte@^3.3.2",
+        "npm:prettier@^3.4.2",
+        "npm:react-dom@19",
+        "npm:react@19",
+        "npm:replace-in-file@^8.2.0",
+        "npm:sass@^1.82.0",
+        "npm:svelte-check@^4.1.1",
+        "npm:svelte-preprocess@^6.0.3",
+        "npm:svelte@^4.2.19",
+        "npm:tslib@^2.8.1",
+        "npm:typescript-eslint@^8.18.0",
+        "npm:typescript@^5.7.2",
+        "npm:vite@^5.4.11"
+      ]
+    }
+  }
+}
diff --git a/examples/react/main.tsx b/examples/react/main.tsx
index 29d6315..9b0fe6a 100644
--- a/examples/react/main.tsx
+++ b/examples/react/main.tsx
@@ -31,11 +31,19 @@ function App() {
 
   const consoleRef = useRef<HTMLDivElement | null>(null);
 
-  const [collapsed, setCollapsed] = useState<boolean>(false);
+  const [collapsed, setCollapsed] = useState(false);
 
   const [reverse, setReverse] = useState<EnableReverse>("never");
 
-  const [clearOnBlur, setClearOnBlur] = useState<boolean>(false);
+  const [clearOnBlur, setClearOnBlur] = useState(false);
+
+  const [clearListOnPick, setClearListOnPick] = useState(false);
+
+  const [keepListOpen, setKeepListOpen] = useState(false);
+
+  const [flyToSelected, setFlyToSelected] = useState(false);
+
+  const [selectFirst, setSelectFirst] = useState(true);
 
   const map = useRef<maptilersdk.Map | null>(null);
 
@@ -105,8 +113,12 @@ function App() {
               onReverseToggle={(data) => log("reverseToggle", data)}
               onResponse={(data) => log("response", data)}
               clearOnBlur={clearOnBlur}
+              clearListOnPick={clearListOnPick}
+              keepListOpen={keepListOpen}
               iconsBaseUrl="/icons/"
               enableReverse={reverse}
+              flyToSelected={flyToSelected}
+              selectFirst={selectFirst}
             />
           )}
 
@@ -128,6 +140,42 @@ function App() {
             <span className="checkable">Clear on blur</span>
           </label>
 
+          <label>
+            <input
+              type="checkbox"
+              checked={clearListOnPick}
+              onChange={(e) => setClearListOnPick(e.currentTarget.checked)}
+            />
+            <span className="checkable">Clear list on pick</span>
+          </label>
+
+          <label>
+            <input
+              type="checkbox"
+              checked={selectFirst}
+              onChange={(e) => setSelectFirst(e.currentTarget.checked)}
+            />
+            <span className="checkable">Select first</span>
+          </label>
+
+          <label>
+            <input
+              type="checkbox"
+              checked={flyToSelected}
+              onChange={(e) => setFlyToSelected(e.currentTarget.checked)}
+            />
+            <span className="checkable">Fly to selected</span>
+          </label>
+
+          <label>
+            <input
+              type="checkbox"
+              checked={keepListOpen}
+              onChange={(e) => setKeepListOpen(e.currentTarget.checked)}
+            />
+            <span className="checkable">Keep the list open</span>
+          </label>
+
           <label>
             <select
               value={reverse}
diff --git a/examples/react/style.css b/examples/react/style.css
index 706d40b..c9c1dd5 100644
--- a/examples/react/style.css
+++ b/examples/react/style.css
@@ -37,3 +37,7 @@ main {
   text-wrap: nowrap;
   color: blue;
 }
+
+select {
+  margin-right: 2ex;
+}
diff --git a/index.html b/index.html
index 43be803..3076812 100644
--- a/index.html
+++ b/index.html
@@ -22,7 +22,11 @@ <h2>Svelte</h2>
 
 <h2>React</h2>
 <ul>
-  <li><a href="/examples/react/">Headless (no map, just the control)</a></li>
+  <li>
+    <a href="/examples/react/">
+      Separated React Geocoding Control controlling the Map
+    </a>
+  </li>
 </ul>
 
 <h2>Vanilla JS (UMD)</h2>
diff --git a/src/FeatureItem.svelte b/src/FeatureItem.svelte
index 3f5da99..5022a63 100644
--- a/src/FeatureItem.svelte
+++ b/src/FeatureItem.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
+  import { createEventDispatcher } from "svelte";
   import type { Feature, ShowPlaceType } from "./types";
 
   export let feature: Feature;
 
-  export let selected = false;
+  export let style: "selected" | "picked" | "default" = "default";
 
   export let showPlaceType: ShowPlaceType;
 
@@ -11,6 +12,8 @@
 
   export let iconsBaseUrl: string;
 
+  const dispatch = createEventDispatcher<{ select: undefined }>();
+
   const categories = feature.properties?.categories;
 
   let category: string | undefined;
@@ -52,8 +55,22 @@
   }
 </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}
@@ -115,6 +132,7 @@
     font-size: 14px;
     line-height: 18px;
     min-width: fit-content;
+    outline: 0;
 
     &:first-child {
       padding-top: 10px;
@@ -124,6 +142,19 @@
       padding-bottom: 10px;
     }
 
+    &.picked {
+      background-color: #e7edff;
+
+      .secondary {
+        color: #96a4c7;
+        padding-left: 4px;
+      }
+
+      .line2 {
+        color: #96a4c7;
+      }
+    }
+
     &.selected {
       background-color: #f3f6ff;
 
@@ -134,6 +165,15 @@
       & .primary {
         color: #2b8bfb;
       }
+
+      .secondary {
+        color: #a2adc7;
+        padding-left: 4px;
+      }
+
+      .line2 {
+        color: #a2adc7;
+      }
     }
 
     & > img {
diff --git a/src/GeocodingControl.svelte b/src/GeocodingControl.svelte
index 58927e1..73e0452 100644
--- a/src/GeocodingControl.svelte
+++ b/src/GeocodingControl.svelte
@@ -60,6 +60,10 @@
 
   export let clearOnBlur = false;
 
+  export let clearListOnPick = false;
+
+  export let keepListOpen = false;
+
   export let collapsed = false;
 
   export let country: string | string[] | undefined = undefined;
@@ -166,9 +170,9 @@
     if (submit) {
       selectedItemIndex = -1;
 
-      handleOnSubmit();
+      handleSubmit();
     } else {
-      handleInput(!reverse, reverse);
+      handleInput(undefined, !reverse, reverse);
 
       setTimeout(() => {
         input.focus();
@@ -194,8 +198,6 @@
     picked = undefined;
   }
 
-  let focused = false;
-
   let listFeatures: Feature[] | undefined;
 
   let markedFeatures: Feature[] | undefined;
@@ -220,13 +222,13 @@
 
   let prevIdToFly: string | undefined;
 
+  let focused = false;
+
   const missingIconsCache = new Set<string>();
 
   const dispatch = createEventDispatcher<DispatcherType>();
 
-  $: {
-    reverseActive = enableReverse === "always";
-  }
+  $: reverseActive = enableReverse === "always";
 
   $: if (
     pickedResultStyle !== "marker-only" &&
@@ -240,20 +242,12 @@
 
   $: {
     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;
     }
@@ -276,7 +270,7 @@
   $: if (mapController && markerOnSelected && !markedFeatures) {
     mapController.setFeatures(
       selected ? [selected] : undefined,
-      undefined,
+      picked,
       showPolygonMarker,
     );
 
@@ -292,7 +286,6 @@
   }
 
   $: if (searchValue.length < minLength) {
-    picked = undefined;
     listFeatures = undefined;
     error = undefined;
     markedFeatures = listFeatures;
@@ -307,23 +300,20 @@
   $: 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) {
@@ -338,9 +328,10 @@
 
   $: dispatch("pick", { feature: picked });
 
-  $: dispatch("optionsvisibilitychange", {
-    optionsVisible: focusedDelayed && !!listFeatures,
-  });
+  $: optionsVisible =
+    !!listFeatures?.length && (focusedDelayed || keepListOpen);
+
+  $: dispatch("optionsvisibilitychange", { optionsVisible });
 
   $: dispatch("featureslisted", { features: listFeatures });
 
@@ -403,7 +394,9 @@
     }
   });
 
-  function handleOnSubmit(event?: unknown) {
+  function handleSubmit(event?: unknown) {
+    focused = false;
+
     if (searchTimeoutRef) {
       clearTimeout(searchTimeoutRef);
 
@@ -533,11 +526,17 @@
 
       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;
@@ -559,7 +558,9 @@
       dispatch("response", { url, featureCollection });
 
       if (byId) {
-        listFeatures = undefined;
+        if (clearListOnPick) {
+          listFeatures = undefined;
+        }
 
         picked = featureCollection.features[0];
 
@@ -599,6 +600,10 @@
 
         cachedFeatures = listFeatures;
 
+        if (listFeatures[selectedItemIndex]?.id !== selected?.id) {
+          selectedItemIndex = -1;
+        }
+
         if (isReverse) {
           input.focus();
         }
@@ -661,6 +666,21 @@
     }
   }
 
+  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: Feature): number | undefined {
     if (
       !feature.bbox ||
@@ -709,27 +729,41 @@
 
     let dir = e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0;
 
-    if (dir) {
-      if (selectedItemIndex === (selectFirst ? 0 : -1) && dir === -1) {
-        selectedItemIndex = listFeatures.length;
-      }
+    if (!dir) {
+      return;
+    }
 
-      selectedItemIndex += dir;
+    input.focus();
 
-      if (selectedItemIndex >= listFeatures.length) {
-        selectedItemIndex = -1;
-      }
+    focused = true;
 
-      if (selectedItemIndex < 0 && selectFirst) {
-        selectedItemIndex = 0;
-      }
+    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;
+    }
 
-      e.preventDefault();
+    selectedItemIndex += dir;
+
+    if (selectedItemIndex >= listFeatures.length) {
+      selectedItemIndex = -1;
+    }
+
+    if (selectedItemIndex < 0 && (picked || selectFirst)) {
+      selectedItemIndex = 0;
     }
   }
 
-  function handleInput(debounce = true, reverse = false) {
+  function handleInput(_?: Event, debounce = true, reverse = false) {
     error = undefined;
+    picked = undefined;
+    focused = true;
 
     if (showResultsWhileTyping || reverse) {
       if (searchTimeoutRef) {
@@ -755,9 +789,27 @@
   }
 
   function pick(feature: 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: number) {
+    selectedItemIndex = index;
+  }
+
+  function handleMouseLeave() {
+    if (!selectFirst || picked) {
+      selectedItemIndex = -1;
+    }
+
+    // re-focus on picked
+    if (flyToSelected) {
+      goToPicked();
+    }
   }
 </script>
 
@@ -766,10 +818,8 @@
   <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}
 >
@@ -783,8 +833,10 @@
       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}
     />
@@ -830,7 +882,7 @@
         <ClearIcon />
       </button>
     </div>
-  {:else if !focusedDelayed}
+  {:else if !focusedDelayed && !keepListOpen}
     {""}
   {:else if listFeatures?.length === 0}
     <div class="no-results">
@@ -838,23 +890,25 @@
 
       <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}
         />
diff --git a/src/leaflet-controller.ts b/src/leaflet-controller.ts
index 23c7b1a..eaf3c16 100644
--- a/src/leaflet-controller.ts
+++ b/src/leaflet-controller.ts
@@ -186,7 +186,7 @@ export function createLeafletMapController(
 
       setData();
 
-      if (picked) {
+      block: if (picked) {
         let handled = false;
 
         if (picked.geometry.type === "GeometryCollection") {
@@ -268,11 +268,11 @@ export function createLeafletMapController(
         ) {
           setData(picked);
 
-          return; // no pin for (multi)linestrings
+          break block; // no pin for (multi)linestrings
         }
 
         if (!showPolygonMarker && picked.geometry.type !== "Point") {
-          return;
+          break block;
         }
 
         if (marker instanceof Function) {
diff --git a/src/maplibregl-controller.ts b/src/maplibregl-controller.ts
index 5effc2f..6dc8aa6 100644
--- a/src/maplibregl-controller.ts
+++ b/src/maplibregl-controller.ts
@@ -253,7 +253,7 @@ export function createMapLibreGlMapController(
         return;
       }
 
-      if (picked) {
+      block: if (picked) {
         let handled = false;
 
         if (picked.geometry.type === "GeometryCollection") {
@@ -311,11 +311,11 @@ export function createMapLibreGlMapController(
         ) {
           setAndSaveData(picked);
 
-          return; // no pin for (multi)linestrings
+          break block; // no pin for (multi)linestrings
         }
 
         if (!showPolygonMarker && picked.geometry.type !== "Point") {
-          return;
+          break block;
         }
 
         if (marker instanceof Function) {
diff --git a/src/openlayers-controller.ts b/src/openlayers-controller.ts
index eccfef2..bffa226 100644
--- a/src/openlayers-controller.ts
+++ b/src/openlayers-controller.ts
@@ -279,7 +279,7 @@ export function createOpenLayersMapController(
         source.addFeature(reverseMarker);
       }
 
-      if (picked) {
+      block: if (picked) {
         let handled = false;
 
         if (picked.geometry.type === "GeometryCollection") {
@@ -335,7 +335,7 @@ export function createOpenLayersMapController(
             ),
           );
 
-          return; // no pin for (multi)linestrings
+          break block; // no pin for (multi)linestrings
         } else if (picked.geometry.type === "MultiLineString") {
           source.addFeature(
             new OlFeature(
@@ -343,11 +343,11 @@ export function createOpenLayersMapController(
             ),
           );
 
-          return; // no pin for (multi)linestrings
+          break block; // no pin for (multi)linestrings
         }
 
         if (!showPolygonMarker && picked.geometry.type !== "Point") {
-          return;
+          break block;
         }
 
         source.addFeature(new OlFeature(fromWgs84(new OlPoint(picked.center))));
diff --git a/src/react.ts b/src/react.ts
index aaebf22..166007f 100644
--- a/src/react.ts
+++ b/src/react.ts
@@ -38,8 +38,11 @@ const propertyNames = [
   "adjustUrlQuery",
   "adjustUrl",
   "apiKey",
+  "apiUrl",
   "bbox",
+  "class",
   "clearButtonTitle",
+  "clearListOnPick",
   "clearOnBlur",
   "collapsed",
   "country",
@@ -47,11 +50,17 @@ const propertyNames = [
   "enableReverse",
   "errorMessage",
   "excludeTypes",
+  "exhaustiveReverseGeocoding",
+  "fetchParameters",
   "filter",
+  "flyToSelected",
   "fuzzyMatch",
+  "iconsBaseUrl",
+  "keepListOpen",
   "language",
   "limit",
   "mapController",
+  "markerOnSelected",
   "minLength",
   "noResultsMessage",
   "pickedResultStyle",
@@ -59,6 +68,7 @@ const propertyNames = [
   "proximity",
   "reverseActive",
   "reverseButtonTitle",
+  "selectFirst",
   "showPlaceType",
   "showResultsWhileTyping",
   "types",
@@ -163,7 +173,7 @@ const ReactGeocodingControl = forwardRef(function ReactGeocodingControl(
     useEffect(
       () =>
         eventHandlerFn &&
-        controlRef.current?.$on(eventName, (e) => {
+        controlRef.current?.$on(eventName.toLowerCase(), (e) => {
           eventHandlerFn(e.detail as never);
         }),
 
diff --git a/src/types.ts b/src/types.ts
index f3e6512..a1fdb67 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -187,12 +187,26 @@ export type ControlOptions = {
   collapsed?: boolean;
 
   /**
-   * If true, the geocoder control will clear its value when the input blurs.
+   * If `true`, the geocoder control will clear its value when the input blurs.
    *
    * Default value is `false`.
    */
   clearOnBlur?: boolean;
 
+  /**
+   * If `true`, then after picking a result from the list or map the list will be cleared and not re-displayed on input box focus.
+   *
+   * Default value is `false`.
+   */
+  clearListOnPick?: boolean;
+
+  /**
+   * Keep the list open even if the control is not focused.
+   *
+   * Default value is `false`.
+   */
+  keepListOpen?: boolean;
+
   /**
    * A function which accepts a Feature in the Carmen GeoJSON format to filter out results from the Geocoding API response before they are included in the suggestions list.
    * Return true to keep the item, false otherwise.