site: rework {up,down} arrow handling

Allows it to work when setting the cursor via the pointer.
This commit is contained in:
Lucas Gabriel Vuotto 2025-04-28 14:19:01 +00:00
parent 301b28e7e1
commit cc25efc5f4
2 changed files with 21 additions and 12 deletions

View file

@ -38,13 +38,14 @@ document.addEventListener('alpine:init', () => {
return;
}
this.activeItem = null;
this.items = await response.json();
this.open = true;
},
fetchSuggestionsOnInput(evt) {
async fetchSuggestionsOnInput(evt) {
this.cursor = evt.target.selectionStart;
this.fetchSuggestions();
await this.fetchSuggestions();
},
autocompleteSuggestion() {
@ -54,6 +55,7 @@ document.addEventListener('alpine:init', () => {
const pos = Math.max(this.cursor - this.currentWord.length, 0);
const tag = this.items[this.activeItem ?? 0].display;
this.items = [];
this.activeItem = null;
this.search = mySplice(this.search, pos, this.currentWord.length,
tag + ' ');
@ -87,20 +89,27 @@ document.addEventListener('alpine:init', () => {
this.activeItem = this.getListItemIndexOf(evt.currentTarget);
},
previousItem(evt) {
moveActiveItem(evt, amount, defaultValue) {
const len = this.items.length;
let item = this.activeItem === null ? -1 : this.activeItem - 1;
item = item % len;
if (len === 0)
returrn;
let item = this.activeItem === null ?
defaultValue : (this.activeItem + amount) % len;
if (item < 0)
item += len;
this.activeItem = item;
},
nextItem(evt) {
const len = this.items.length;
let item = this.activeItem === null ? 0 : this.activeItem + 1;
item = item % len;
this.activeItem = item;
async moveActiveItemBackward(evt) {
await this.fetchSuggestionsOnInput(evt);
this.moveActiveItem(evt, -1, -1);
},
async moveActiveItemForward(evt) {
await this.fetchSuggestionsOnInput(evt);
this.moveActiveItem(evt, 1, 0);
},
}));
});