From 8a97ddf2c14cb3007f2052c3e0eb880c71996841 Mon Sep 17 00:00:00 2001
From: Cade Scroggins <git@cade.me>
Date: Sun, 24 Jul 2022 23:20:33 -0700
Subject: [PATCH] spruce up keyboard/focus event functionality

---
 index.html | 61 ++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 38 insertions(+), 23 deletions(-)

diff --git a/index.html b/index.html
index 2e84a63..d51f333 100644
--- a/index.html
+++ b/index.html
@@ -429,6 +429,7 @@
       this.#refs.form = clone.querySelector('.form');
       this.#refs.input = clone.querySelector('.input');
       this.#refs.suggestionsContainer = clone.querySelector('.suggestions');
+      this.#refs.input.addEventListener('focus', this.#onFocusInput);
       this.#refs.input.addEventListener('input', this.#onInput);
       const onSubmit = () => this.#execute(this.#refs.input.value);
       this.#refs.form.addEventListener('submit', onSubmit, false);
@@ -450,8 +451,8 @@
         window.autocompleteCallback = (res) =>
           resolve(
             res
+              .filter((item) => item.phrase !== search.toLowerCase())
               .map((item) => item.phrase)
-              .filter((item) => item.toLowerCase() !== search.toLowerCase())
           );
 
         const script = document.createElement('script');
@@ -533,6 +534,7 @@
 
     #close() {
       this.#refs.input.value = '';
+      this.#refs.input.blur();
       this.#refs.dialog.close();
       this.#clearSuggestions();
     }
@@ -559,6 +561,14 @@
       else this.#refs.input.focus();
     }
 
+    #onFocusInput = (e) => {
+      const target = e.currentTarget;
+
+      requestAnimationFrame(() => {
+        if (!target.value) this.#close();
+      });
+    };
+
     #onInput = async (e) => {
       const q = SearchComponent.#parseQuery(e.currentTarget.value);
       let suggestions = CONFIG.suggestions[q.query] ?? [];
@@ -573,31 +583,36 @@
     };
 
     #onKeydown = (e) => {
-      if (/^Escape$/.test(e.key)) return this.#close();
-
-      const keyWithModifiers =
-        (e.altKey ? 'alt-' : '') +
-        (e.ctrlKey ? 'ctrl-' : '') +
-        (e.metaKey ? 'meta-' : '') +
-        (e.shiftKey ? 'shift-' : '') +
-        e.key;
-
-      if (/^(ArrowDown|Tab|ctrl-n)$/.test(keyWithModifiers)) {
-        e.preventDefault();
-        return this.#focusNextSuggestion();
-      }
-
-      if (/^(ArrowUp|ctrl-p|shift-Tab)$/.test(keyWithModifiers)) {
-        e.preventDefault();
-        return this.#focusNextSuggestion(true);
-      }
-
-      if (/^(Alt|Enter|Shift)$/.test(e.key) || e.ctrlKey || e.metaKey) {
+      if (!this.#refs.dialog.open) {
+        this.#refs.dialog.showModal();
+        this.#refs.input.focus();
         return;
       }
 
-      if (!this.#refs.dialog.open) this.#refs.dialog.showModal();
-      this.#refs.input.focus();
+      if (
+        e.key === 'Escape' ||
+        (e.key === 'Backspace' && !this.#refs.input.value)
+      ) {
+        this.#close();
+        return;
+      }
+
+      const alt = e.altKey ? 'alt-' : '';
+      const ctrl = e.ctrlKey ? 'ctrl-' : '';
+      const meta = e.metaKey ? 'meta-' : '';
+      const shift = e.shiftKey ? 'shift-' : '';
+      const modifierPrefixedKey = `${alt}${ctrl}${meta}${shift}${e.key}`;
+
+      if (/^(ArrowDown|Tab|ctrl-n)$/.test(modifierPrefixedKey)) {
+        e.preventDefault();
+        this.#focusNextSuggestion();
+        return;
+      }
+
+      if (/^(ArrowUp|ctrl-p|shift-Tab)$/.test(modifierPrefixedKey)) {
+        e.preventDefault();
+        this.#focusNextSuggestion(true);
+      }
     };
 
     #renderSuggestions(suggestions, query) {