Update Autocomplete position when suggestion selection makes it move to the next row

This commit is contained in:
Henrik Giesel 2021-09-08 15:11:53 +02:00
parent 7bdf9aaf00
commit 60b1d65351
3 changed files with 21 additions and 7 deletions

View file

@ -472,7 +472,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}} }}
on:keydown={onKeydown} on:keydown={onKeydown}
on:keyup={onKeyup} on:keyup={onKeyup}
on:input={() => updateTagName(tag)} on:taginput={() => updateTagName(tag)}
on:tagsplit={({ detail }) => on:tagsplit={({ detail }) =>
enterBehavior(index, detail.start, detail.end)} enterBehavior(index, detail.start, detail.end)}
on:tagadd={() => insertTagKeepFocus(index)} on:tagadd={() => insertTagKeepFocus(index)}

View file

@ -65,8 +65,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
name = name.slice(0, position - 1) + name.slice(position, name.length); name = name.slice(0, position - 1) + name.slice(position, name.length);
await tick(); await tick();
setPosition(position - 1);
event.preventDefault(); event.preventDefault();
setPosition(position - 1);
dispatch("taginput");
} }
} }
@ -144,6 +145,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
await tick(); await tick();
setPosition(positionStart + 1); setPosition(positionStart + 1);
dispatch("taginput");
} }
function onKeydown(event: KeyboardEvent): void { function onKeydown(event: KeyboardEvent): void {
@ -243,7 +245,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on:keydown={onKeydown} on:keydown={onKeydown}
on:keydown on:keydown
on:keyup on:keyup
on:input on:input={() => dispatch("taginput")}
on:copy|preventDefault={onCopy} on:copy|preventDefault={onCopy}
on:paste|preventDefault={onPaste} on:paste|preventDefault={onPaste}
/> />

View file

@ -41,7 +41,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
/** /**
* select as currently highlighted item * select as currently highlighted item
*/ */
async function selectNext() { function incrementSelected(): void {
if (selected === null) { if (selected === null) {
selected = 0; selected = 0;
} else if (selected >= suggestionsItems.length - 1) { } else if (selected >= suggestionsItems.length - 1) {
@ -49,11 +49,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} else { } else {
selected++; selected++;
} }
dispatch("select", { selected: suggestionsItems[selected ?? -1] });
} }
async function selectPrevious() { function decrementSelected(): void {
if (selected === null) { if (selected === null) {
selected = suggestionsItems.length - 1; selected = suggestionsItems.length - 1;
} else if (selected === 0) { } else if (selected === 0) {
@ -61,8 +59,22 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} else { } else {
selected--; selected--;
} }
}
async function updateSelected(): Promise<void> {
dispatch("select", { selected: suggestionsItems[selected ?? -1] }); dispatch("select", { selected: suggestionsItems[selected ?? -1] });
await tick();
dropdown.update();
}
async function selectNext(): Promise<void> {
incrementSelected();
await updateSelected();
}
async function selectPrevious(): Promise<void> {
decrementSelected();
await updateSelected();
} }
/** /**