refactor: Dont loose focus on search input when navigating results

2 files changed, 37 insertions, 24 deletions

diff --git a/apps/web-shared/src/components/dropdown.svelte b/apps/web-shared/src/components/dropdown.svelte
index b5068a7..2cddce9 100644
--- a/apps/web-shared/src/components/dropdown.svelte
+++ b/apps/web-shared/src/components/dropdown.svelte
@@ -25,7 +25,6 @@
 
     const INTERNAL_ID = "__dropdown-" + random_string(5);
 
-    let entriesUlNode;
     let searchInputNode;
     let searchResults = [];
     let searchValue = "";
@@ -34,7 +33,7 @@
     let lastKeydownCode = "";
     let mouseIsOverDropdown = false;
     let mouseIsOverComponent = false;
-    
+
     $: hasSelection = entries.some((c) => c.selected === true);
     $: if (searchValue.trim()) {
         showCreationHint = createable && entries.every((c) => search.normalise_value(c.name) !== search.normalise_value(searchValue));
@@ -74,6 +73,7 @@
             if (selected && !multiple) {
                 searchValue = selected.name;
             }
+            document.querySelector("#" + INTERNAL_ID + " ul li.focus")?.classList.remove("focus");
             showDropdown = false;
         }
     };
@@ -191,7 +191,7 @@
             const spacePressed = event.code === "Space";
             const arrowDownPressed = event.code === "ArrowDown";
             const searchInputHasFocus = element_has_focus(searchInputNode);
-            const focusedEntry = entriesUlNode?.querySelector("li:focus");
+            const focusedEntry = document.querySelector("#" + INTERNAL_ID + " ul    .focus");
 
             if (showDropdown && (enterPressed || arrowDownPressed)) {
                 event.preventDefault();
@@ -204,28 +204,39 @@
                 }
                 return;
             }
+            if (searchInputHasFocus && enterPressed && showCreationHint) {
+                methods.create_entry(searchValue.trim());
+                return;
+            }
 
-            if (searchInputHasFocus) {
-                if (enterPressed && showCreationHint) {
-                    methods.create_entry(searchValue.trim());
-                    return;
-                }
-
-                if (arrowDownPressed) {
-                    const firstEntry = entriesUlNode.querySelector("li:first-of-type");
-                    if (firstEntry) {
-                        firstEntry.focus();
-                    }
+            if (searchInputHasFocus && !focusedEntry && arrowDownPressed) {
+                const firstEntry = document.querySelector("#" + INTERNAL_ID + " ul li:first-of-type");
+                if (firstEntry) {
+                    firstEntry.classList.add("focus");
                     return;
                 }
             }
 
             if (focusedEntry && (arrowUpPressed || arrowDownPressed)) {
-                if (arrowDownPressed && focusedEntry.nextElementSibling) {
-                    focusedEntry.nextElementSibling.focus();
-                } else if (arrowUpPressed && focusedEntry.previousElementSibling) {
-                    focusedEntry.previousElementSibling.focus();
+                if (arrowDownPressed) {
+                    if (focusedEntry.nextElementSibling) {
+                        focusedEntry.nextElementSibling.classList.add("focus");
+                        focusedEntry.nextElementSibling.scrollIntoView();
+                    } else {
+                        document.querySelector("#" + INTERNAL_ID + " ul li:first-of-type").classList.add("focus");
+                        document.querySelector("#" + INTERNAL_ID + " ul li:first-of-type").scrollIntoView();
+
+                    }
+                } else if (arrowUpPressed) {
+                    if (focusedEntry.previousElementSibling) {
+                        focusedEntry.previousElementSibling.classList.add("focus");
+                        focusedEntry.previousElementSibling.scrollIntoView();
+                    } else {
+                        document.querySelector("#" + INTERNAL_ID + " ul li:last-of-type").classList.add("focus");
+                        document.querySelector("#" + INTERNAL_ID + " ul li:last-of-type").scrollIntoView();
+                    }
                 }
+                focusedEntry.classList.remove("focus");
                 return;
             }
 
@@ -330,8 +341,7 @@
 
     <!-- dropdown -->
     <div class="autocomplete__results select-auto__results">
-        <ul bind:this={entriesUlNode}
-            on:keydown={(event) => event.code.startsWith("Arrow") && event.preventDefault()}
+        <ul on:keydown={(event) => event.code.startsWith("Arrow") && event.preventDefault()}
             tabindex="-1"
             class="autocomplete__list">
             {#if searchResults.length > 0}
diff --git a/apps/web-shared/src/styles/components/select-autocomplete.scss b/apps/web-shared/src/styles/components/select-autocomplete.scss
index 78a0fb0..d5360ff 100644
--- a/apps/web-shared/src/styles/components/select-autocomplete.scss
+++ b/apps/web-shared/src/styles/components/select-autocomplete.scss
@@ -38,7 +38,7 @@ Usage: codyhouse.co/license
       white-space: nowrap;
       margin-right: 1px;
     }
-    
+
     input[type="text"] {
       width: auto;
     }
@@ -67,7 +67,8 @@ Usage: codyhouse.co/license
     color: var(--color-contrast-low);
   }
 
-  &:focus-within {
+  &:focus-within,
+  .focus {
     background: var(--color-bg);
     box-shadow: inset 0 0 0 1px alpha(var(--color-contrast-lower), 0), 0px 0px 0px 1px var(--color-primary);
     outline: none;
@@ -140,7 +141,8 @@ Usage: codyhouse.co/license
     background-color: alpha(var(--color-contrast-higher), 0.05);
   }
 
-  &:focus {
+  &:focus,
+  &.focus {
     outline: none;
     background-color: alpha(var(--color-primary), 0.12);
   }
@@ -151,7 +153,8 @@ Usage: codyhouse.co/license
     padding-right: calc(1em + var(--space-sm));
     @include fontSmooth;
 
-    &:focus {
+    &:focus,
+    .focus {
       background-color: var(--color-primary-dark);
     }