Fix behavior when autocompletion shows

This commit is contained in:
Henrik Giesel 2021-06-29 12:45:02 +02:00
parent 54c1f54ab0
commit 392326b863

View file

@ -230,27 +230,31 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
activeAfterBlur = null; activeAfterBlur = null;
} }
function printableKey(event: KeyboardEvent): boolean { function isPrintableKey(event: KeyboardEvent): boolean {
return ( return event.key.length === 1;
(event.location === KeyboardEvent.DOM_KEY_LOCATION_STANDARD || }
event.location === KeyboardEvent.DOM_KEY_LOCATION_NUMPAD) &&
!event.code.startsWith("Arrow") && function isDeletionKey(event: KeyboardEvent): boolean {
event.code !== "Backspace" && event.code !== "Delete" return event.code === "Backspace" || event.code === "Delete";
);
} }
function update(event: KeyboardEvent, autocomplete: any): void { function update(event: KeyboardEvent, autocomplete: any): void {
const visible = autocomplete.isVisible(); const visible = autocomplete.isVisible();
const printable = printableKey(event); const printable = isPrintableKey(event);
const deletion = isDeletionKey(event);
if (!visible) { if (!visible) {
if (printable) { if (printable || deletion) {
autocomplete.show(); autocomplete.show();
} else { } else {
return; return;
} }
} }
if (activeName.length === 0) {
autocomplete.hide();
}
switch (event.code) { switch (event.code) {
case "ArrowUp": case "ArrowUp":
autocomplete.selectNext(); autocomplete.selectNext();
@ -264,25 +268,23 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
case "Tab": case "Tab":
if (event.shiftKey) { if (event.shiftKey) {
autocomplete.selectNext();
} else {
autocomplete.selectPrevious(); autocomplete.selectPrevious();
} else {
autocomplete.selectNext();
} }
event.preventDefault(); event.preventDefault();
break; break;
case "Enter": case "Enter":
console.log("choose");
autocomplete.chooseSelected(); autocomplete.chooseSelected();
event.preventDefault(); event.preventDefault();
break; break;
default: default:
if (!printable) { if (printable || deletion) {
return; autocomplete.update();
} }
autocomplete.update();
break; break;
} }
} }
@ -298,7 +300,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<div class="pb-1"> <div class="pb-1">
{#if index === active} {#if index === active}
<WithAutocomplete <WithAutocomplete
class="d-flex flex-column-reverse" class="d-flex flex-column-reverse dropup"
{suggestionsPromise} {suggestionsPromise}
on:update={updateSuggestions} on:update={updateSuggestions}
on:autocomplete={({ detail }) => on:autocomplete={({ detail }) =>