From e228237056e4c3f523c76a46bc088d1a5bbe24dd Mon Sep 17 00:00:00 2001
From: Niket Pathak <niketpathak89@gmail.com>
Date: Thu, 26 Sep 2024 13:22:27 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20submit=20items=20from=20e?=
 =?UTF-8?q?mpty=20list=20correctly.=20Fixes=20#86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/assets/js/testable.js  | 7 +++++--
 demo/dev.esm.html           | 3 +++
 demo/testable.html          | 2 +-
 src/typeahead-standalone.ts | 7 ++++++-
 4 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/demo/assets/js/testable.js b/demo/assets/js/testable.js
index 25644e9..4136354 100644
--- 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
index 74a2bdf..b706bf7 100644
--- 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
index a9c04ed..56456a7 100644
--- 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
index e961784..af53a0a 100644
--- 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) {