Export choice as autocompletionChoice from TagAutocomplete

This commit is contained in:
Henrik Giesel 2021-06-27 18:57:32 +02:00
parent 2e00dc09d6
commit 05d1c51d6b
2 changed files with 10 additions and 22 deletions

View file

@ -13,37 +13,23 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export { className as class };
export let suggestions: string[];
export let original: string | undefined;
export let search: string;
let autocomplete: Dropdown | undefined;
let displayed: string[] = [];
let selected: number | null = null;
export let choice: string | undefined;
$: choice = displayed[selected ?? -1];
// blue highlight
let active: boolean = false;
function select(index: number) {
selected = index;
}
function choose() {}
function switchUpDown(event: KeyboardEvent): void {
const target = event.currentTarget as HTMLButtonElement;
if (event.code === "ArrowUp") {
if (target.nextElementSibling) {
(target.nextElementSibling as HTMLButtonElement).focus();
}
event.preventDefault();
} else if (event.code === "ArrowDown") {
if (target.previousElementSibling) {
(target.previousElementSibling as HTMLButtonElement).focus();
}
event.preventDefault();
}
}
const updateAutocomplete =
(createDropdown: (element: HTMLElement) => Dropdown) =>
(event: KeyboardEvent): Dropdown => {
@ -99,7 +85,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<slot
updateAutocomplete={updateAutocomplete(createDropdown)}
{destroyAutocomplete}
selected={displayed[selected ?? -1]}
/>
<DropdownMenu id={menuId} class={className}>

View file

@ -33,6 +33,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let active: number | null = null;
let activeAfterBlur: number | null = null;
let autocompletionChoice: string | undefined;
function setActiveAfterBlur(value: number): void {
if (activeAfterBlur === null) {
activeAfterBlur = value;
@ -204,7 +206,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<TagAutocomplete
class="d-flex flex-column-reverse"
{suggestions}
original={tags[active ?? -1]?.name}
search={tags[active ?? -1]?.name ?? ""}
bind:choice={autocompletionChoice}
let:updateAutocomplete
let:destroyAutocomplete
>