From dc0a4e33bd7b34b862f64b330b2ae2f0a1a5a694 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?=
 <sascha.issbruecker@googlemail.com>
Date: Sat, 14 May 2022 01:02:48 +0200
Subject: [PATCH] Scroll menu items into view when using keyboard (#248)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Sascha Ißbrücker <sascha.issbruecker@gmail.com>
---
 bookmarks/components/TagAutocomplete.svelte | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/bookmarks/components/TagAutocomplete.svelte b/bookmarks/components/TagAutocomplete.svelte
index 5f85e63..f1daf79 100644
--- a/bookmarks/components/TagAutocomplete.svelte
+++ b/bookmarks/components/TagAutocomplete.svelte
@@ -11,6 +11,7 @@
     let isFocus = false;
     let isOpen = false;
     let input = null;
+    let suggestionList = null;
 
     let suggestions = [];
     let selectedIndex = 0;
@@ -100,6 +101,16 @@
         if (newIndex >= length) newIndex = 0;
 
         selectedIndex = newIndex;
+
+        // Scroll to selected list item
+        setTimeout(() => {
+            if (suggestionList) {
+                const selectedListItem = suggestionList.querySelector('li.selected');
+                if (selectedListItem) {
+                    selectedListItem.scrollIntoView({block: 'center'});
+                }
+            }
+        }, 0);
     }
 </script>
 
@@ -114,7 +125,8 @@
     </div>
 
     <!-- autocomplete suggestion list -->
-    <ul class="menu" class:open={isOpen && suggestions.length > 0}>
+    <ul class="menu" class:open={isOpen && suggestions.length > 0}
+        bind:this={suggestionList}>
         <!-- menu list items -->
         {#each suggestions as tag,i}
             <li class="menu-item" class:selected={selectedIndex === i}>