Better way to display the search while there is no options

nuxt · Sep 12, 2023 · bf4f452 · bf4f452
1 parent d4a8037
commit bf4f452
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue
@@ -105,16 +105,16 @@
               </div>
             </li>
           </component>
+          <p v-else-if="searchable && !filteredOptions.length && isSearching" :class="uiMenu.option.empty">
+            <slot name="option-empty-loading" :query="query">
+              {{ query ? `Searching for "${query}"` : "Searching for results..." }}
+            </slot>
+          </p>
           <p v-else-if="searchable && query && !filteredOptions.length" :class="uiMenu.option.empty">
             <slot name="option-empty" :query="query">
               No results for "{{ query }}".
             </slot>
           </p>
-          <p v-else-if="searchable && !filteredOptions.length && isSearching" :class="uiMenu.option.empty">
-            <slot name="option-empty-loading" :query="query">
-              Searching for results...
-            </slot>
-          </p>
         </component>
       </Transition>
     </div>