Trigger mounted event for autocomplete to remove timing dependency (#395

)
rapidez · Dec 12, 2023 · 4ab9933 · 4ab9933
1 parent 3b70353
commit 4ab9933
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/resources/js/components/Search/Autocomplete.vue b/resources/js/components/Search/Autocomplete.vue
@@ -14,6 +14,10 @@ export default {
         },
     },
 
+    mounted() {
+        this.$nextTick(() => this.$emit('mounted'))
+    },
+
     render() {
         return this.$scopedSlots.default(Object.assign(this, { self: this }))
     },

diff --git a/resources/views/layouts/partials/header/autocomplete.blade.php b/resources/views/layouts/partials/header/autocomplete.blade.php
@@ -5,11 +5,12 @@
     id="autocomplete-input"
     placeholder="@lang('Search')"
     class="{{ $inputClasses }}"
-    v-on:focus="$root.loadAutocomplete = true; window.setTimeout(() => window.document.getElementById('autocomplete-input').focus(), 200)"
+    v-on:focus="$root.loadAutocomplete = true"
     v-if="!$root.loadAutocomplete">
 
 <autocomplete
     v-if="$root.loadAutocomplete"
+    v-on:mounted="() => window.document.getElementById('autocomplete-input').focus()"
     v-cloak
     :additionals="{ categories: ['name^3', 'meta_description^1'] }"
     class="w-full"