only filter when autocomplete is blur

components/AutocompleteMeiliFacets.vue

@@ -131,13 +131,14 @@ const isValidFilters = computed(() => {
     const toValFilterStep = toValue(filterStep)
 
     const toValFilterItems = toValue(filterItems)
-    if (toValFilterItems === undefined) {
+    if (toValFilterItems === undefined || toValFilterItems?.length === 0) {
         return true
     }
     else {
         const toValLastFilterItem = toValue(lastFilterItem)
         if (toValLastFilterItem !== undefined) {
-            return toValLastFilterItem.type === 'value' && isAutocompleteFocused.value === false || (toValFilterStep === 0 && toValLastFilterItem.type === "outerOperator" && toValLastFilterItem.value.split("-")[0] === "AND")
+            return toValLastFilterItem.type === 'value' && isAutocompleteFocused.value === false
+            // || (toValFilterStep === 0 && toValLastFilterItem.type === "outerOperator" && toValLastFilterItem.value.split("-")[0] === "AND")
         }
     }
     return false
@@ -184,9 +185,6 @@ watchEffect(() => {
         console.log(meiliFilter)
         emit('update:modelValue', meiliFilter)
     }
-    if (toValFilterStep === 0 && toValLastFilterItem !== undefined && toValLastFilterItem.type === "outerOperator" && toValLastFilterItem.value.split("-")[0] === "AND") {
-
-    }
 
 })
 </script>

components/ServerDbTable.vue

@@ -374,6 +374,11 @@ function focusedOrBlur(isFocused: boolean) {
                             </template>
                         </v-autocomplete>
                     </v-toolbar>
+                    <v-toolbar>
+                        <AutocompleteMeiliFacets v-model="msFilterCompo" :db="props.db"
+                            @refresh:search="() => console.log('refresh the search new compo')">
+                        </AutocompleteMeiliFacets>
+                    </v-toolbar>
                 </template>
                 <template v-else>
                     <v-toolbar>
@@ -391,7 +396,7 @@ function focusedOrBlur(isFocused: boolean) {
                                 @update:focused="focusedOrBlur"></v-text-field>
                         </v-card>
                         <v-card variant="flat" color="transparent" :min-width="500" class="mx-2" :rounded="false">
-                            <v-autocomplete ref="autocompleteInput" hide-details v-model:model-value="filterOrSearch"
+                            <!-- <v-autocomplete ref="autocompleteInput" hide-details v-model:model-value="filterOrSearch"
                                 auto-select-first chips clearable label="Filter results..." :items="autocompleteItems"
                                 single-line item-value="value" item-title="title" multiple return-object
                                 :disabled="pendingDownloadData" prepend-inner-icon="md:search"
@@ -408,7 +413,7 @@ function focusedOrBlur(isFocused: boolean) {
 
                                     </v-list-item>
                                 </template>
-                            </v-autocomplete>
+                            </v-autocomplete> -->
 
                         </v-card>
                         <v-card>