feat: add search debounce functionality to Select component

Author: SerVitasik

adminforth/spa/src/afcl/Select.vue

@@ -52,7 +52,7 @@
           <label v-if="!$slots.item" :for="item.value">{{ item.label }}</label>
         </div>
         <div v-if="!filteredItems.length" class="px-4 py-2 cursor-pointer text-lightDropdownOptionsText dark:text-darkDropdownOptionsText">
-          {{ options?.length ? $t('No results found') : $t('No items here') }}
+          {{ $t('No results found') }}
         </div>
 
         <div v-if="$slots['extra-item']" class="px-4 py-2 dark:text-gray-400">
@@ -148,6 +148,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  searchDebounceMs: {
+    type: Number,
+    default: 300,
+  },
 });
 
 const emit = defineEmits(['update:modelValue', 'scroll-near-end', 'search']);
@@ -165,14 +169,20 @@ const dropdownStyle = ref<{ top?: string; }>({
 
 const selectedItems: Ref<any[]> = ref([]);
 const internalSelect = ref<HTMLElement | null>(null);
+let searchDebounceHandle: ReturnType<typeof setTimeout> | null = null;
 
 function inputInput() {
   if (!props.multiple && selectedItems.value.length) {
     selectedItems.value = [];
     emit('update:modelValue', null);
   }
   if (!props.searchDisabled) {
-    emit('search', search.value);
+    if (searchDebounceHandle) {
+      clearTimeout(searchDebounceHandle);
+    }
+    searchDebounceHandle = setTimeout(() => {
+      emit('search', search.value);
+    }, props.searchDebounceMs);
   }
 }
 
@@ -329,6 +339,10 @@ onUnmounted(() => {
   if (props.teleportToBody) {
     window.removeEventListener('scroll', handleScroll, true);
   }
+  if (searchDebounceHandle) {
+    clearTimeout(searchDebounceHandle);
+    searchDebounceHandle = null;
+  }
 });
 
 const getDropdownPosition = computed(() => {

adminforth/spa/src/components/ColumnValueInput.vue

@@ -17,7 +17,7 @@
     <Select
       v-else-if="column.foreignResource"
       ref="input"
-      :key="`${column.name}-${(columnOptions[column.name] || []).length}`"
+      :key="`select-${column.name}-${source}-${column.foreignResource?.name || column.foreignResource?.table || ''}`"
       class="w-full min-w-24"
       :options="columnOptions[column.name] || []"
       :searchDisabled="!column.foreignResource.searchableFields"