refactor: move the debounce to the filter object

formwerkjs · Jan 16, 2025 · 09b4fd9 · 09b4fd9
1 parent 7f497fc
commit 09b4fd9
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/packages/core/src/collections/filter.ts b/packages/core/src/collections/filter.ts
@@ -8,14 +8,16 @@ export interface FilterContext<TValue> {
 
 export interface FilterFn {
   (context: FilterContext<unknown>): boolean;
+  debounceMs: number;
 }
 
 export interface FilterOptions {
   caseSensitive?: boolean;
+  debounceMs?: number;
 }
 
 export function useDefaultFilter(options: FilterOptions = {}) {
-  const { caseSensitive = false } = options;
+  const { caseSensitive = false, debounceMs = 100 } = options;
 
   const withCaseSensitive = caseSensitive ? (value: string) => value : (value: string) => value.toLowerCase();
 
@@ -35,6 +37,11 @@ export function useDefaultFilter(options: FilterOptions = {}) {
     return withCaseSensitive(option.label) === withCaseSensitive(search);
   };
 
+  contains.debounceMs = debounceMs;
+  startsWith.debounceMs = debounceMs;
+  endsWith.debounceMs = debounceMs;
+  equals.debounceMs = debounceMs;
+
   return {
     contains,
     startsWith,

diff --git a/packages/core/src/useComboBox/useComboBox.ts b/packages/core/src/useComboBox/useComboBox.ts
@@ -96,11 +96,6 @@ export interface ComboBoxCollectionOptions {
    * The filter function to use.
    */
   filter: FilterFn;
-
-  /**
-   * The debounce time in milliseconds for the filter function.
-   */
-  debounceMs?: number;
 }
 
 export function useComboBox<TOption, TValue = TOption>(
@@ -336,7 +331,7 @@ export function useComboBox<TOption, TValue = TOption>(
       });
     }
 
-    watch(inputValue, debounce(collectionOptions?.debounceMs ?? 100, updateHiddenState));
+    watch(inputValue, debounce(filter.debounceMs, updateHiddenState));
   }
 
   return exposeField(

diff --git a/packages/playground/src/components/ComboBox.vue b/packages/playground/src/components/ComboBox.vue
@@ -10,6 +10,7 @@ const props = defineProps<Props>();
 
 const { contains } = useDefaultFilter({
   caseSensitive: false,
+  debounceMs: 200,
 });
 
 const { inputProps, listBoxProps, labelProps, buttonProps, errorMessageProps, errorMessage, descriptionProps } =