🐛 fix: submit items from empty list correctly. Fixes #86

digitalfortress-tech · Sep 26, 2024 · e228237 · e228237
1 parent bfc4a99
commit e228237
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 4 deletions.
diff --git a/demo/assets/js/testable.js b/demo/assets/js/testable.js
@@ -507,6 +507,11 @@ const test4 = typeahead({
     wrapper: 'typeahead-standalone typeahead-test-four',
   },
   highlight: true,
+  // autoSelect: true,
+  onSubmit: (e) => {
+    e.preventDefault();
+    document.querySelector('#input-4-submit-val').innerHTML = e.target.value;
+  },
   templates: {
     suggestion: (item, resultSet) => {
       return `<span class="preview" data-resultset="${resultSet.hits[0].hash}" style="background-color:${item.hash}"></span>
@@ -982,5 +987,3 @@ const test19 = typeahead({
     `,
   },
 });
-
-
diff --git a/demo/dev.esm.html b/demo/dev.esm.html
@@ -175,6 +175,9 @@ <h4>Try searching for marvel/DC movies...</h4>
           className: 'typeahead-example',
           minLength: 1,
           limit: 10,
+          onSubmit: (e, selectedSuggestion) => {
+            console.log(`Submitted value -> ${e.target.value}`);
+          },
           templates: {
             suggestion: (item) => {
               const date = item.release_date

diff --git a/demo/testable.html b/demo/testable.html
@@ -91,7 +91,7 @@ <h3 class="subtitle">3B. Transform Remote</h3>
     <section class="section-four top-section">
       <form method="GET">
         <h3 class="subtitle">4. Templates, Source: Local, Object Arr</h3>
-        <p class="details">Used Templates: header; footer; suggestion; group; notFound</p>
+        <p class="details">Used Templates: header; footer; suggestion; group; notFound <span id="input-4-submit-val"></span></p>
         <div>
           <label for="input-four">My Fav Color</label>
           <input id="input-four" name="color-test-4" type="search" autocomplete="off" placeholder="Search...">

diff --git a/src/typeahead-standalone.ts b/src/typeahead-standalone.ts
@@ -454,6 +454,11 @@ const typeahead = <T extends Dictionary>(config: typeaheadConfig<T>): typeaheadR
       return clear();
     }
 
+    // clear selected items on deleting characters
+    if (ev.key === 'Backspace') {
+      selected = undefined;
+    }
+
     if (resultSet.hits.length && (ev.key === 'ArrowUp' || ev.key === 'ArrowDown')) {
       ev.key === 'ArrowDown' ? selectNext(ev) : selectPrev(ev);
       update();
@@ -465,7 +470,7 @@ const typeahead = <T extends Dictionary>(config: typeaheadConfig<T>): typeaheadR
     }
 
     // if empty query, do nothing
-    if (!resultSet.query) return;
+    if (!resultSet.query && !input.value.length) return;
 
     const useSelectedValue = (fallback = false) => {
       if (!selected && fallback && resultSet.hits.length) {