From 0e0436f8508825616e997353ad8afc65a29476e3 Mon Sep 17 00:00:00 2001
From: Hikaru Y <hkrysg@gmail.com>
Date: Tue, 28 Mar 2023 13:13:21 +0900
Subject: [PATCH] Allow Shift+Tab to move focus from tag area to last field
 (#2458)

---
 ts/editor/NoteEditor.svelte                     |  2 +-
 ts/tag-editor/TagInput.svelte                   | 17 ++++++++++-------
 .../tag-options-button/TagAddButton.svelte      |  4 +++-
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/ts/editor/NoteEditor.svelte b/ts/editor/NoteEditor.svelte
index 89bd89a50..7d20850ee 100644
--- a/ts/editor/NoteEditor.svelte
+++ b/ts/editor/NoteEditor.svelte
@@ -287,7 +287,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     function saveNow(): void {
-        commitTagEdits();
+        $commitTagEdits();
         saveFieldNow();
     }
 
diff --git a/ts/tag-editor/TagInput.svelte b/ts/tag-editor/TagInput.svelte
index e90d44b22..0f8effefb 100644
--- a/ts/tag-editor/TagInput.svelte
+++ b/ts/tag-editor/TagInput.svelte
@@ -3,11 +3,14 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script context="module" lang="ts">
-    let current: HTMLInputElement | null = null;
+    import { derived, writable } from "svelte/store";
 
-    export function commitTagEdits(): void {
-        current?.blur();
-    }
+    export const currentTagInput = writable<HTMLInputElement | null>(null);
+
+    export const commitTagEdits = derived<typeof currentTagInput, () => void>(
+        currentTagInput,
+        ($currentTagInput) => () => $currentTagInput?.blur(),
+    );
 </script>
 
 <script lang="ts">
@@ -253,11 +256,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     });
 
     function updateCurrent(input: HTMLInputElement): ActionReturn {
-        current = input;
+        $currentTagInput = input;
         return {
             destroy(): void {
-                if (current === input) {
-                    current = null;
+                if ($currentTagInput === input) {
+                    $currentTagInput = null;
                 }
             },
         };
diff --git a/ts/tag-editor/tag-options-button/TagAddButton.svelte b/ts/tag-editor/tag-options-button/TagAddButton.svelte
index e3d86ba10..ebec247a1 100644
--- a/ts/tag-editor/tag-options-button/TagAddButton.svelte
+++ b/ts/tag-editor/tag-options-button/TagAddButton.svelte
@@ -9,6 +9,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import IconConstrain from "../../components/IconConstrain.svelte";
     import Shortcut from "../../components/Shortcut.svelte";
+    import { currentTagInput } from "../TagInput.svelte";
     import { addTagIcon, tagIcon } from "./icons";
 
     export let keyCombination: string;
@@ -20,10 +21,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
+<!-- toggle tabindex to allow Shift+Tab to move focus to the last field -->
 <div
     class="tag-add-button"
     title="{tr.editingTagsAdd()} ({getPlatformString(keyCombination)})"
-    tabindex={0}
+    tabindex={$currentTagInput ? -1 : 0}
     on:click={appendTag}
     on:focus={appendTag}
 >