diff --git a/ts/editor/Tag.svelte b/ts/editor/Tag.svelte index 6c7b6ddf8..91b48940d 100644 --- a/ts/editor/Tag.svelte +++ b/ts/editor/Tag.svelte @@ -43,6 +43,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html bind:input on:focus on:blur={() => (active = false)} + on:blur + on:keydown on:tagupdate={updateTag} on:tagadd on:tagjoinprevious diff --git a/ts/editor/TagAutocomplete.svelte b/ts/editor/TagAutocomplete.svelte index 9a26ce472..ae5565de8 100644 --- a/ts/editor/TagAutocomplete.svelte +++ b/ts/editor/TagAutocomplete.svelte @@ -15,6 +15,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html export { className as class }; let autocomplete: Dropdown | undefined; + let displayed: string[] = []; function switchUpDown(event: KeyboardEvent): void { const target = event.currentTarget as HTMLButtonElement; @@ -33,16 +34,30 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html } } - const createAutocomplete = + const updateAutocomplete = (createDropdown: (element: HTMLElement) => Dropdown) => - (element: HTMLElement) => { - autocomplete = createDropdown(element); + (event: KeyboardEvent): Dropdown => { + const target = event.target as HTMLElement; + autocomplete = createDropdown(target); + autocomplete.show(); + return autocomplete; }; + + function destroyAutocomplete(): void { + if (!autocomplete) { + return; + } + + autocomplete.hide(); + } - + {#each suggestions as tag} diff --git a/ts/editor/TagEditor.svelte b/ts/editor/TagEditor.svelte index 62816c5b6..9be359ac3 100644 --- a/ts/editor/TagEditor.svelte +++ b/ts/editor/TagEditor.svelte @@ -27,7 +27,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html newInput.blur(); } - console.log("focus"); newInput.focus(); } @@ -105,13 +104,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html {#each tags as tag, index (tag.id)} createAutocomplete(event.target)} + on:keydown={updateAutocomplete} + on:blur={destroyAutocomplete} on:tagupdate={() => checkForDuplicateAt(index)} on:tagadd={() => insertTagAt(index)} on:tagdelete={() => deleteTagAt(index)} @@ -123,8 +123,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html createAutocomplete(event.target)} - on:keydown + on:keydown={updateAutocomplete} + on:blur={destroyAutocomplete} on:tagupdate={appendTag} on:tagadd={appendTag} on:tagjoinprevious={joinWithLastTag} diff --git a/ts/editor/TagInput.svelte b/ts/editor/TagInput.svelte index 7e3f5dfe3..dd02955bc 100644 --- a/ts/editor/TagInput.svelte +++ b/ts/editor/TagInput.svelte @@ -51,7 +51,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html onAccept(); event.preventDefault(); } - console.log("keydown"); } function onPaste(event: ClipboardEvent): void { @@ -100,6 +99,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html on:blur on:blur={onAccept} on:keydown={onKeydown} + on:keydown on:paste={onPaste} on:click />