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 { className as class };
export let suggestions: string[]; export let suggestions: string[];
export let original: string | undefined; export let search: string;
let autocomplete: Dropdown | undefined; let autocomplete: Dropdown | undefined;
let displayed: string[] = []; let displayed: string[] = [];
let selected: number | null = null; let selected: number | null = null;
export let choice: string | undefined;
$: choice = displayed[selected ?? -1];
// blue highlight
let active: boolean = false; let active: boolean = false;
function select(index: number) { function select(index: number) {
selected = index; 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 = const updateAutocomplete =
(createDropdown: (element: HTMLElement) => Dropdown) => (createDropdown: (element: HTMLElement) => Dropdown) =>
(event: KeyboardEvent): Dropdown => { (event: KeyboardEvent): Dropdown => {
@ -99,7 +85,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<slot <slot
updateAutocomplete={updateAutocomplete(createDropdown)} updateAutocomplete={updateAutocomplete(createDropdown)}
{destroyAutocomplete} {destroyAutocomplete}
selected={displayed[selected ?? -1]}
/> />
<DropdownMenu id={menuId} class={className}> <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 active: number | null = null;
let activeAfterBlur: number | null = null; let activeAfterBlur: number | null = null;
let autocompletionChoice: string | undefined;
function setActiveAfterBlur(value: number): void { function setActiveAfterBlur(value: number): void {
if (activeAfterBlur === null) { if (activeAfterBlur === null) {
activeAfterBlur = value; activeAfterBlur = value;
@ -204,7 +206,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<TagAutocomplete <TagAutocomplete
class="d-flex flex-column-reverse" class="d-flex flex-column-reverse"
{suggestions} {suggestions}
original={tags[active ?? -1]?.name} search={tags[active ?? -1]?.name ?? ""}
bind:choice={autocompletionChoice}
let:updateAutocomplete let:updateAutocomplete
let:destroyAutocomplete let:destroyAutocomplete
> >