Removed suspense after new Vue release

Author: indykoning

resources/js/components/Search/Autocomplete.vue

@@ -16,6 +16,7 @@ import { useDebounceFn } from '@vueuse/core'
 import { rapidezAPI } from '../../fetch'
 import { searchHistory } from '../../stores/useSearchHistory'
 
+let focusId = document.activeElement.id
 export default {
     mixins: [InstantSearchMixin],
     components: {
@@ -40,25 +41,27 @@ export default {
         },
     },
 
-    data() {
-        return {
-            focusId: null,
-        }
-    },
-
     render() {
         return this.$slots.default(this)
     },
     created() {
-        this.focusId = document.activeElement.id
+        focusId ??= document.activeElement.id
     },
     mounted() {
+        let element = null
+        if (focusId && (element = this.$el.nextSibling.querySelector('#' + focusId))) {
+            setTimeout(() => {
+                requestAnimationFrame(() => {
+                    element?.focus()
+                })
+            })
+        }
         this.$nextTick(() => {
             this.$emit('mounted')
             setTimeout(() => {
                 requestAnimationFrame(() => {
                     let element = null
-                    if (this.focusId && (element = this.$el.nextSibling.querySelector('#' + this.focusId))) {
+                    if (focusId && (element = this.$el.nextSibling.querySelector('#' + focusId))) {
                         element?.focus()
                     }
                 })

resources/js/vue-components.js

@@ -57,7 +57,6 @@ document.addEventListener('vue:loaded', function (event) {
                 }),
 
                 render() {
-                    // TODO: seems broken, replaced by <Suspense> (https://github.com/vuejs/core/pull/13997)
                     return this.$slots.default(this)
                 },
                 delay: 0,

resources/views/layouts/partials/header/autocomplete.blade.php

@@ -1,49 +1,43 @@
-<Suspense>
-    <template #default>
-        <autocomplete v-slot="autocompleteSlotProps" :hits-per-page="{{ config('rapidez.frontend.autocomplete.size', 3) }}">
-            <div class="relative w-full" ref="root">
-                <ais-instant-search
-                    v-if="autocompleteSlotProps.searchClient"
-                    :future="{ preserveSharedStateOnUnmount: true }"
-                    :search-client="autocompleteSlotProps.searchClient"
-                    :middlewares="autocompleteSlotProps.middlewares"
-                    :index-name="config.index.product"
-                    class="contents"
-                    v-cloak
-                >
-                    <div class="contents">
-                        <div class="searchbox group/autocomplete">
-                            <ais-autocomplete>
-                                <template v-slot="{ currentRefinement, refine }">
-                                    <x-rapidez::autocomplete.input
-                                        v-bind:value="currentRefinement"
-                                        v-on:focus="() => {
-                                            refine(autocompleteFacadeQuery || currentRefinement);
-                                            autocompleteFacadeQuery = null;
-                                        }"
-                                        v-on:input="refine($event.currentTarget.value)"
-                                        list="search-history"
-                                    />
-                                    <div v-on:click="refine('')" class="fixed inset-0 bg-backdrop z-header-autocomplete-overlay hidden group-has-[input:not(:placeholder-shown)]/autocomplete:block group-has-[:focus]/autocomplete:block"></div>
-                                </template>
-                            </ais-autocomplete>
-                            <div class="absolute inset-x-0 top-full mt-1 bg-white rounded-md z-header-autocomplete hidden group-has-[input:not(:placeholder-shown)]/autocomplete:block group-has-[:focus]/autocomplete:block hover:block">
-                                @include('rapidez::layouts.partials.header.autocomplete.results')
-                            </div>
-                            <ais-stats-analytics></ais-stats-analytics>
-                        </div>
+<autocomplete v-slot="autocompleteSlotProps" :hits-per-page="{{ config('rapidez.frontend.autocomplete.size', 3) }}">
+    <div class="relative w-full" ref="root">
+        <ais-instant-search
+            v-if="autocompleteSlotProps.searchClient"
+            :future="{ preserveSharedStateOnUnmount: true }"
+            :search-client="autocompleteSlotProps.searchClient"
+            :middlewares="autocompleteSlotProps.middlewares"
+            :index-name="config.index.product"
+            class="contents"
+            v-cloak
+        >
+            <div class="contents">
+                <div class="searchbox group/autocomplete">
+                    <ais-autocomplete>
+                        <template v-slot="{ currentRefinement, refine }">
+                            <x-rapidez::autocomplete.input
+                                v-bind:value="currentRefinement"
+                                v-on:focus="() => {
+                                    refine(autocompleteFacadeQuery || currentRefinement);
+                                    autocompleteFacadeQuery = null;
+                                }"
+                                v-on:input="refine($event.currentTarget.value)"
+                                list="search-history"
+                            />
+                            <div v-on:click="refine('')" class="fixed inset-0 bg-backdrop z-header-autocomplete-overlay hidden group-has-[input:not(:placeholder-shown)]/autocomplete:block group-has-[:focus]/autocomplete:block"></div>
+                        </template>
+                    </ais-autocomplete>
+                    <div class="absolute inset-x-0 top-full mt-1 bg-white rounded-md z-header-autocomplete hidden group-has-[input:not(:placeholder-shown)]/autocomplete:block group-has-[:focus]/autocomplete:block hover:block">
+                        @include('rapidez::layouts.partials.header.autocomplete.results')
                     </div>
-                </ais-instant-search>
+                    <ais-stats-analytics></ais-stats-analytics>
+                </div>
             </div>
-        </autocomplete>
-    </template>
-    <template #fallback>
-        <div class="relative w-full">
+        </ais-instant-search>
+        <div v-else class="relative w-full">
             <x-rapidez::autocomplete.input
                 v-model="autocompleteFacadeQuery"
                 v-on:focus="window.document.dispatchEvent(new window.Event('loadAutoComplete'))"
                 v-on:mouseover="window.document.dispatchEvent(new window.Event('loadAutoComplete'))"
             />
         </div>
-    </template>
-</Suspense>
+    </div>
+</autocomplete>