From 4ab9933582f53507ee7fb57cbf8388bc46253243 Mon Sep 17 00:00:00 2001
From: indykoning <15870933+indykoning@users.noreply.github.com>
Date: Tue, 12 Dec 2023 11:07:18 +0100
Subject: [PATCH] Trigger mounted event for autocomplete to remove timing
 dependency (#395)

---
 resources/js/components/Search/Autocomplete.vue               | 4 ++++
 .../views/layouts/partials/header/autocomplete.blade.php      | 3 ++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/Search/Autocomplete.vue b/resources/js/components/Search/Autocomplete.vue
index 8401aa9b6..a709fd641 100644
--- 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
index ce997ff25..15bc2cc7e 100644
--- 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"