Crash when custom size has been passed fix (#1032)

Author: indykoning

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

@@ -21,12 +21,12 @@ class="contents"
                                 v-on:input="refine($event.currentTarget.value)"
                                 list="search-history"
                             />
-                            <div v-bind:class="{hidden: !currentRefinement}" class="absolute inset-x-0 top-full mt-1 bg-white rounded-md z-header-autocomplete group-has-[:focus]/autocomplete:block hover:block">
-                                @include('rapidez::layouts.partials.header.autocomplete.results')
-                            </div>
-                            <div v-bind:class="{hidden: !currentRefinement}" v-on:click="refine('')" class="fixed inset-0 bg-backdrop z-header-autocomplete-overlay group-has-[:focus]/autocomplete:block"></div>
+                            <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>
             </div>

resources/views/layouts/partials/header/autocomplete/no-results.blade.php

@@ -1,14 +1,14 @@
-<ais-state-results v-slot="{ status }">
+<ais-state-results v-slot="{ status, query }">
     <div v-if="status === 'stalled'" class="flex items-center mx-auto px-5 py-2.5">
         <x-rapidez-loading class="size-5 text-gray-200 animate-spin fill-primary" />
         <span class="ml-2">@lang('Searching...')</span>
     </div>
     <ais-hits>
         <template v-slot="{ items }">
-            <div v-if="items.length === 0 && currentRefinement !== '' && status === 'idle'" class="p-5">
+            <div v-if="items.length === 0 && query !== '' && status === 'idle'" class="p-5">
                 <div class="font-bold text text-lg break-all">
                     @lang('No results found for :searchterm', [
-                        'searchterm' => '<span class="text-primary">"@{{ currentRefinement }}"</span>'
+                        'searchterm' => '<span class="text-primary">"@{{ query }}"</span>'
                     ])
                 </div>
                 <div class="flex flex-col text-sm pt-7">

resources/views/layouts/partials/header/autocomplete/search-suggestions.blade.php

@@ -1,31 +1,33 @@
 <search-suggestions v-slot="searchSuggestions" :force-results="false">
-    <ais-instant-search
-        v-if="searchSuggestions.searchClient"
-        :index-name="config.index.search_query"
-        :search-client="searchSuggestions.searchClient"
-    >
-        <ais-configure
-            :query="currentRefinement || ' '"
-            :hits-per-page.camel="{{ Arr::get($fields, 'size', config('rapidez.frontend.autocomplete.size', 3)) }}"
-            filters="display_in_terms:1"
-        />
-        <ais-hits v-slot="{ items }">
-            <div v-if="items && items.length" v-bind:class="{ 'border-b': currentRefinement }" class="py-2.5">
-                <x-rapidez::autocomplete.title>
-                    @lang('Suggestions')
-                </x-rapidez::autocomplete.title>
-                <ul class="flex flex-col font-sans">
-                    <li v-for="(item, count) in items" class="flex flex-1 items-center w-full">
-                        <a
-                            v-bind:href="window.url(item.redirect || '{{ route('search', ['q' => 'searchPlaceholder']) }}'.replace('searchPlaceholder', encodeURIComponent(item.query_text)))"
-                            class="relative flex items-center group w-full px-5 py-2 text-sm gap-x-4"
-                            data-turbo="false"
-                        >
-                            <x-rapidez::highlight attribute="query_text" class="line-clamp-2"/>
-                        </a>
-                    </li>
-                </ul>
-            </div>
-        </ais-hits>
-    </ais-instant-search>
+    <ais-state-results v-slot="{ query }">
+        <ais-instant-search
+            v-if="searchSuggestions.searchClient"
+            :index-name="config.index.search_query"
+            :search-client="searchSuggestions.searchClient"
+        >
+            <ais-configure
+                :query="query || ' '"
+                :hits-per-page.camel="{{ Arr::get($fields, 'size', config('rapidez.frontend.autocomplete.size', 3)) }}"
+                filters="display_in_terms:1"
+            />
+            <ais-hits v-slot="{ items }">
+                <div v-if="items && items.length" v-bind:class="{ 'border-b': query }" class="py-2.5">
+                    <x-rapidez::autocomplete.title>
+                        @lang('Suggestions')
+                    </x-rapidez::autocomplete.title>
+                    <ul class="flex flex-col font-sans">
+                        <li v-for="(item, count) in items" class="flex flex-1 items-center w-full">
+                            <a
+                                v-bind:href="window.url(item.redirect || '{{ route('search', ['q' => 'searchPlaceholder']) }}'.replace('searchPlaceholder', encodeURIComponent(item.query_text)))"
+                                class="relative flex items-center group w-full px-5 py-2 text-sm gap-x-4"
+                                data-turbo="false"
+                            >
+                                <x-rapidez::highlight attribute="query_text" class="line-clamp-2"/>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </ais-hits>
+        </ais-instant-search>
+    </ais-state-results>
 </search-suggestions>