Allow Shift+Tab to move focus from tag area to last field (#2458)

This commit is contained in:
Hikaru Y 2023-03-28 13:13:21 +09:00 committed by GitHub
parent bbaa6c24ec
commit 0e0436f850
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 9 deletions

View file

@ -287,7 +287,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
function saveNow(): void { function saveNow(): void {
commitTagEdits(); $commitTagEdits();
saveFieldNow(); saveFieldNow();
} }

View file

@ -3,11 +3,14 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--> -->
<script context="module" lang="ts"> <script context="module" lang="ts">
let current: HTMLInputElement | null = null; import { derived, writable } from "svelte/store";
export function commitTagEdits(): void { export const currentTagInput = writable<HTMLInputElement | null>(null);
current?.blur();
} export const commitTagEdits = derived<typeof currentTagInput, () => void>(
currentTagInput,
($currentTagInput) => () => $currentTagInput?.blur(),
);
</script> </script>
<script lang="ts"> <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 { function updateCurrent(input: HTMLInputElement): ActionReturn {
current = input; $currentTagInput = input;
return { return {
destroy(): void { destroy(): void {
if (current === input) { if ($currentTagInput === input) {
current = null; $currentTagInput = null;
} }
}, },
}; };

View file

@ -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 IconConstrain from "../../components/IconConstrain.svelte";
import Shortcut from "../../components/Shortcut.svelte"; import Shortcut from "../../components/Shortcut.svelte";
import { currentTagInput } from "../TagInput.svelte";
import { addTagIcon, tagIcon } from "./icons"; import { addTagIcon, tagIcon } from "./icons";
export let keyCombination: string; export let keyCombination: string;
@ -20,10 +21,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
</script> </script>
<!-- toggle tabindex to allow Shift+Tab to move focus to the last field -->
<div <div
class="tag-add-button" class="tag-add-button"
title="{tr.editingTagsAdd()} ({getPlatformString(keyCombination)})" title="{tr.editingTagsAdd()} ({getPlatformString(keyCombination)})"
tabindex={0} tabindex={$currentTagInput ? -1 : 0}
on:click={appendTag} on:click={appendTag}
on:focus={appendTag} on:focus={appendTag}
> >