fix: reset state when clean filter

src/components/common/VnSelect.vue

@@ -145,25 +145,29 @@ function filter(val, options) {
         return id == search || optionLabel.includes(search);
     });
 }
-function whereFn(val) {
+
+async function fetchFilter(val) {
+    if (!useURL.value) return;
     const { fields, sortBy, limit } = $props;
     let key = new RegExp(/\d/g).test(val)
         ? optionFilter.value ?? optionValue.value
         : optionValue.value;
 
     const where = { ...{ [key]: { like: `%${val}%` } }, ...$props.where };
-    const fetchOptions = { where, order: sortBy, limit };
-    return fetchOptions;
-}
-async function fetchFilter(val) {
-    if (!useURL.value) return;
-    const fetchOptions = whereFn(val);
+    const fetchOptions = { where, fields, order: sortBy, limit };
     arrayData.store.userFilter = fetchOptions;
     return arrayData.fetch({ append: false, updateRouter: false });
 }
 let isFiltered = false;
 watch(filterValue, (newVal, oldVal) => {
-    isFiltered = oldVal?.length < newVal?.length;
+    const _isFiltered = oldVal?.length < newVal?.length;
+    if (!_isFiltered && isFiltered) {
+        arrayData.store.hasMoreData = true;
+        arrayData.store.userFilter = $props.where;
+        arrayData.store.filter.where = $props.where;
+        arrayData.store.data = myOptions.value;
+    }
+    isFiltered = _isFiltered;
 });
 async function filterHandler(val, update) {
     if (!$props.defaultFilter) return update();
@@ -175,7 +179,7 @@ async function filterHandler(val, update) {
     } else {
         newOptions = filter(val, myOptionsOriginal.value);
     }
-    if (useURL.value && isFiltered) {
+    if (useURL.value && isFiltered && arrayData.store.hasMoreData) {
         arrayData.store.skip = 0;
         arrayData.store.filter.skip = 0;
         arrayData.store.filter.where = { [optionFilter.value]: val, ...$props.where };
@@ -203,16 +207,7 @@ async function onScroll(scrollEv) {
     if (from === 0 && index === 0) return;
     if (!useURL.value && !$props.fetchRef) return;
     if (direction === 'decrease') return;
-    console.log(arrayData.store.data.length, myOptions.value.length);
-    // const restoreFilter = +arrayData.store.limit === myOptions.value.length;
     if (to === lastIndex && arrayData.store.hasMoreData && !isLoading.value) {
-        if (isFiltered) {
-            arrayData.store.userFilter = $props.where;
-            arrayData.store.filter.where = $props.where;
-            arrayData.store.hasMoreData = true;
-            await initSelect();
-            return;
-        }
         isLoading.value = true;
         await arrayData.loadMore();
         setOptions(arrayData.store.data);
@@ -244,7 +239,6 @@ async function onScroll(scrollEv) {
         virtual-scroll-slice-size="options.length"
     >
         <template v-if="isClearable" #append>
-            {{ `(${myOptions.length})` }}
             <QIcon
                 v-show="value"
                 name="close"
@@ -253,6 +247,7 @@ async function onScroll(scrollEv) {
                 size="xs"
             />
         </template>
+
         <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
             <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
         </template>