Lucas/Pooru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

site: remove x-model="search" in search component

Browse source 
There is an issue that screws with cursor position afterwards, always
placing it at the end. For the time being, manage the binding manually.
This commit is contained in:
Lucas Gabriel Vuotto 2025-04-28 15:59:10 +00:00
parent bf21610576
commit 9935590a19
2 changed files with 6 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

13
public/js/app.js
View file

@ -20,7 +20,8 @@ document.addEventListener('alpine:init', () => {
}, },
async fetchSuggestions() { async fetchSuggestions() {
const currentWord = getCurrentWordFromCursor(this.search, this.cursor); const currentWord = getCurrentWordFromCursor(this.$refs.search.value,
this.cursor);
if (!currentWord) if (!currentWord)
return; return;
if (currentWord === this.currentWord) { if (currentWord === this.currentWord) {
@ -58,16 +59,14 @@ document.addEventListener('alpine:init', () => {
this.items = []; this.items = [];
this.activeItem = null; this.activeItem = null;
this.search = mySplice(this.search, pos, this.currentWord.length, this.$refs.search.value = mySplice(this.$refs.search.value, pos,
tag + ' '); this.currentWord.length, tag + ' ');
this.cursor = this.cursor = pos + tag.length + 1;
this.$refs.search.selectionStart =
this.$refs.search.selectionEnd =
pos + tag.length + 1;
this.currentWord = ''; this.currentWord = '';
this.open = false; this.open = false;
this.$refs.search.focus(); this.$refs.search.focus();
this.$refs.search.setSelectionRange(this.cursor, this.cursor);
}, },
autocompleteItem(evt) { autocompleteItem(evt) {

1
templates/_search.html.ep
View file

@ -9,7 +9,6 @@
@click.outside="open = false"> @click.outside="open = false">
<input name="tags" value="<%= param "tags" %>" placeholder="Search tags..." <input name="tags" value="<%= param "tags" %>" placeholder="Search tags..."
x-ref="search" x-ref="search"
x-model="search"
@input.debounce="fetchSuggestionsOnInput" @input.debounce="fetchSuggestionsOnInput"
@keydown.tab="autocompleteItem" @keydown.tab="autocompleteItem"
@keydown.enter="autocompleteItem" @keydown.enter="autocompleteItem"