From 9935590a19545abe762dc2287a066f77b458eec4 Mon Sep 17 00:00:00 2001 From: Lucas Gabriel Vuotto Date: Mon, 28 Apr 2025 15:59:10 +0000 Subject: [PATCH] site: remove x-model="search" in search component There is an issue that screws with cursor position afterwards, always placing it at the end. For the time being, manage the binding manually. --- public/js/app.js | 13 ++++++------- templates/_search.html.ep | 1 - 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/public/js/app.js b/public/js/app.js index dd7fb19..a7cbffe 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -20,7 +20,8 @@ document.addEventListener('alpine:init', () => { }, async fetchSuggestions() { - const currentWord = getCurrentWordFromCursor(this.search, this.cursor); + const currentWord = getCurrentWordFromCursor(this.$refs.search.value, + this.cursor); if (!currentWord) return; if (currentWord === this.currentWord) { @@ -58,16 +59,14 @@ document.addEventListener('alpine:init', () => { this.items = []; this.activeItem = null; - this.search = mySplice(this.search, pos, this.currentWord.length, - tag + ' '); - this.cursor = - this.$refs.search.selectionStart = - this.$refs.search.selectionEnd = - pos + tag.length + 1; + this.$refs.search.value = mySplice(this.$refs.search.value, pos, + this.currentWord.length, tag + ' '); + this.cursor = pos + tag.length + 1; this.currentWord = ''; this.open = false; this.$refs.search.focus(); + this.$refs.search.setSelectionRange(this.cursor, this.cursor); }, autocompleteItem(evt) { diff --git a/templates/_search.html.ep b/templates/_search.html.ep index 3cd3b0f..95b70c1 100644 --- a/templates/_search.html.ep +++ b/templates/_search.html.ep @@ -9,7 +9,6 @@ @click.outside="open = false"> " placeholder="Search tags..." x-ref="search" - x-model="search" @input.debounce="fetchSuggestionsOnInput" @keydown.tab="autocompleteItem" @keydown.enter="autocompleteItem"