From 8d955031899f7bf78309a2566392100c34f00018 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 25 Jun 2021 17:34:04 +0200
Subject: [PATCH] Add tabbable option to DropdownItem

---
 ts/components/DropdownItem.svelte |  2 ++
 ts/editor/TagAutocomplete.svelte  | 10 +++++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/ts/components/DropdownItem.svelte b/ts/components/DropdownItem.svelte
index 2f5cf6c17..8fa598031 100644
--- a/ts/components/DropdownItem.svelte
+++ b/ts/components/DropdownItem.svelte
@@ -11,6 +11,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export { className as class };
 
     export let tooltip: string | undefined = undefined;
+    export let tabbable: boolean = true;
 
     let buttonRef: HTMLButtonElement;
 
@@ -22,6 +23,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <button
     {id}
+    tabindex={tabbable ? 0 : -1}
     bind:this={buttonRef}
     class={`btn dropdown-item ${className}`}
     class:btn-day={!nightMode}
diff --git a/ts/editor/TagAutocomplete.svelte b/ts/editor/TagAutocomplete.svelte
index 1a08d26ba..a7c7eaf52 100644
--- a/ts/editor/TagAutocomplete.svelte
+++ b/ts/editor/TagAutocomplete.svelte
@@ -30,7 +30,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
     }
 
-    function updateActiveItem(even: FocusEvent): void {}
+    function updateActiveItem(event: FocusEvent): void {
+        event.preventDefault();
+    }
 </script>
 
 <ButtonToolbar class={`dropup ${className}`} {size}>
@@ -38,8 +40,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     <DropdownMenu class="d-flex flex-column-reverse">
         {#each suggestions as tag}
-            <DropdownItem on:focus={updateActiveItem} on:keydown={switchUpDown}
-                >{tag}</DropdownItem
+            <DropdownItem
+                tabbable={false}
+                on:focus={updateActiveItem}
+                on:keydown={switchUpDown}>{tag}</DropdownItem
             >
         {/each}
     </DropdownMenu>