From 8fd4412dbee44d0b02dc4266ef998492a24d46c2 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Wed, 8 Sep 2021 19:18:37 +0200 Subject: [PATCH] Fix bug where sometimes Autocomplete menu would not show even though suggestions exist --- ts/components/DropdownMenu.svelte | 3 +- ts/components/WithDropdown.svelte | 7 ++--- ts/editor/TagEditor.svelte | 46 ++++++++++--------------------- ts/editor/WithAutocomplete.svelte | 21 ++++++-------- 4 files changed, 26 insertions(+), 51 deletions(-) diff --git a/ts/components/DropdownMenu.svelte b/ts/components/DropdownMenu.svelte index 2dc03e668..830f19009 100644 --- a/ts/components/DropdownMenu.svelte +++ b/ts/components/DropdownMenu.svelte @@ -11,11 +11,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html export { className as class }; export let labelledby: string | undefined = undefined; + export let show = false; setContext(dropdownKey, null); -
+
diff --git a/ts/components/WithDropdown.svelte b/ts/components/WithDropdown.svelte index 246330f80..498e2c27e 100644 --- a/ts/components/WithDropdown.svelte +++ b/ts/components/WithDropdown.svelte @@ -14,7 +14,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html export let toggleOpen = true; export let drop: "down" | "up" = "down"; - let placement: string; + let placement: "bottom" | "top"; $: switch (drop) { case "down": placement = "bottom"; @@ -52,10 +52,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html dropdown = new Dropdown(toggle, { autoClose, - popperConfig: (defaultConfig: Record) => ({ - ...defaultConfig, - placement, - }), + popperConfig: { placement }, } as any); if (autoOpen) { diff --git a/ts/editor/TagEditor.svelte b/ts/editor/TagEditor.svelte index 16f442283..374a26adf 100644 --- a/ts/editor/TagEditor.svelte +++ b/ts/editor/TagEditor.svelte @@ -14,7 +14,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import Tag from "./Tag.svelte"; import WithAutocomplete from "./WithAutocomplete.svelte"; import ButtonToolbar from "components/ButtonToolbar.svelte"; - import { controlPressed } from "lib/keys"; import type { Tag as TagType } from "./tags"; import { attachId, @@ -34,12 +33,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html tags = names.map(replaceWithUnicodeSeparator).map(attachId); } + const noSuggestions = Promise.resolve([]); + let suggestionsPromise: Promise = noSuggestions; + function saveTags(): void { bridgeCommand( `saveTags:${JSON.stringify( tags.map((tag) => tag.name).map(replaceWithColons) )}` ); + + suggestionsPromise = noSuggestions; } let active: number | null = null; @@ -48,9 +52,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html let activeInput: HTMLInputElement; let autocomplete: any; - - const noSuggestions = Promise.resolve([]); - let suggestionsPromise: Promise = noSuggestions; + let autocompleteDisabled: boolean = false; async function fetchSuggestions(input: string): Promise { const data = await postRequest( @@ -67,12 +69,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html const activeTag = tags[active!]; const activeName = activeTag.name; - suggestionsPromise = - activeName.length === 0 - ? noSuggestions - : fetchSuggestions(activeTag.name).then((names: string[]): string[] => - names.map(replaceWithUnicodeSeparator) - ); + autocompleteDisabled = activeName.length === 0; + suggestionsPromise = autocompleteDisabled + ? noSuggestions + : fetchSuggestions(activeTag.name).then((names: string[]): string[] => { + autocompleteDisabled = names.length === 0; + return names.map(replaceWithUnicodeSeparator); + }); } function onAutocomplete(selected: string): void { @@ -254,27 +257,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html activeAfterBlur = null; } - function isPrintableKey(event: KeyboardEvent): boolean { - return event.key.length === 1 && !controlPressed(event); - } - - function isDeletionKey(event: KeyboardEvent): boolean { - return event.code === "Backspace" || event.code === "Delete"; - } - function onKeydown(event: KeyboardEvent): void { - const visible = autocomplete.isVisible(); - const printable = isPrintableKey(event); - const deletion = isDeletionKey(event); - - if (!visible) { - if (printable || deletion) { - autocomplete.show(); - } else { - return; - } - } - switch (event.code) { case "ArrowUp": autocomplete.selectPrevious(); @@ -464,12 +447,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html on:select={({ detail }) => onAutocomplete(detail.selected)} on:choose={({ detail }) => onAutocomplete(detail.chosen)} let:createAutocomplete - let:disabled > { diff --git a/ts/editor/WithAutocomplete.svelte b/ts/editor/WithAutocomplete.svelte index f1dd4345e..37ebc93d1 100644 --- a/ts/editor/WithAutocomplete.svelte +++ b/ts/editor/WithAutocomplete.svelte @@ -17,17 +17,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html export let drop: "down" | "up" = "down"; export let suggestionsPromise: Promise; - let disabled = true; let dropdown: Dropdown; + let show = false; let suggestionsItems: string[] = []; $: suggestionsPromise.then((items) => { - if (items.length > 0) { - disabled = false; + show = items.length > 0; + + if (show) { dropdown.show(); } else { dropdown.hide(); - disabled = true; } suggestionsItems = items; @@ -83,7 +83,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html async function chooseSelected() { active = true; dispatch("choose", { chosen: suggestionsItems[selected ?? -1] }); + await tick(); + show = false; } async function update() { @@ -97,10 +99,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html return selected !== null; } - function disable(): void { - disabled = true; - } - const createAutocomplete = (createDropdown: (element: HTMLElement) => Dropdown) => (element: HTMLElement): any => { @@ -116,7 +114,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html chooseSelected, update, hasSelected, - disable, }; return api; @@ -141,14 +138,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html setSelected(index); } } - - onDestroy(() => dropdown?.dispose()); - + - + {#each suggestionsItems as suggestion, index}