@placeholderco/placeholder-ui 3.0.0 → 3.0.2

package/dist/form/Autocomplete.svelte

@@ -242,6 +242,7 @@
 
 	function onFilterChange(filterValue: string) {
 		if (filterValue.length === 0) {
+			core.cancelSearch();
 			core.filterLocal('');
 			open = true;
 			return;
@@ -250,6 +251,7 @@
 		if (searchFunction && filterValue) {
 			core.search(filterValue, () => (open = true));
 		} else {
+			core.cancelSearch();
 			core.filterLocal(filterValue);
 			open = true;
 		}

package/dist/form/AutocompleteMulti.svelte

@@ -299,6 +299,7 @@
 		if (searchFunction && text) {
 			core.search(text, () => (open = true));
 		} else {
+			core.cancelSearch();
 			core.filterLocal(text);
 			open = true;
 		}

package/dist/form/Select.svelte

@@ -170,7 +170,14 @@
 
 	function focus() {
 		open = true;
-		tick().then(() => textboxElement?.focus());
+		tick().then(focusTextbox);
+	}
+
+	// Select any leftover filter text on reopen so typing replaces it
+	function focusTextbox() {
+		const input = textboxElement as HTMLInputElement | undefined;
+		input?.focus();
+		input?.select();
 	}
 
 	$effect(() => {
@@ -205,6 +212,7 @@
 		if (searchFunction && filterValue) {
 			core.search(filterValue, () => (open = true));
 		} else {
+			core.cancelSearch();
 			core.filterLocal(filterValue);
 		}
 	}
@@ -319,7 +327,7 @@
 				onclick={() => {
 					open = !open;
 					if (open && computedAllowSearch) {
-						tick().then(() => textboxElement?.focus());
+						tick().then(focusTextbox);
 					}
 				}}
 				onkeydown={(e) => onKeyDown(e)}

package/dist/form/SelectMulti.svelte

@@ -181,7 +181,14 @@
 
 	function focus() {
 		open = true;
-		tick().then(() => textboxElement?.focus());
+		tick().then(focusTextbox);
+	}
+
+	// Select any leftover filter text on reopen so typing replaces it
+	function focusTextbox() {
+		const input = textboxElement as HTMLInputElement | undefined;
+		input?.focus();
+		input?.select();
 	}
 
 	$effect(() => {
@@ -240,6 +247,7 @@
 				hideCombobox = false;
 			});
 		} else {
+			core.cancelSearch();
 			core.filterLocal(value);
 			hideCombobox = false;
 		}
@@ -294,7 +302,7 @@
 			onclick={() => {
 				open = !open;
 				if (open && computedAllowSearch) {
-					tick().then(() => textboxElement?.focus());
+					tick().then(focusTextbox);
 				}
 			}}
 			onkeydown={(e) => onKeyDown(e)}

package/dist/form/comboBoxCore.svelte.d.ts

@@ -82,8 +82,14 @@ export declare abstract class ComboBoxDataCore<TConfig extends ComboBoxDataConfi
     abstract preloadValues(): boolean;
     convertOptions(options: ComboBoxItem[]): void;
     convertGroupOptions(groups: ComboBoxGroup[]): void;
-    /** Debounced remote search via searchFunction. */
+    /**
+     * Debounced remote search via searchFunction. Each call supersedes the previous one:
+     * a pending debounce is dropped and an in-flight request is aborted, so only the
+     * latest query's results are ever applied.
+     */
     search(filterValue: string, onComplete?: () => void): void;
+    /** Drop any pending or in-flight remote search, e.g. when the input switches to local filtering. */
+    cancelSearch(): void;
     /** Case-insensitive local filter over already-loaded options. */
     filterLocal(filterValue: string): void;
 }

package/dist/form/comboBoxCore.svelte.js

@@ -21,6 +21,7 @@ export class ComboBoxDataCore {
     searching = $state(false);
     config;
     #timeout;
+    #searchController;
     #fetchInitialized = false;
     #lastOptionsRef;
     #lastGroupedRef;
@@ -62,7 +63,7 @@ export class ComboBoxDataCore {
             this.preloadValues();
             cfg.onOptionsChanged?.();
         });
-        $effect(() => () => clearTimeout(this.#timeout));
+        $effect(() => () => this.#abortPendingSearch());
     }
     convertOptions(options) {
         const items = options.map((option) => ({ ...option, selected: this.isSelected(option) }));
@@ -80,18 +81,44 @@ export class ComboBoxDataCore {
         }));
         this.filteredGroups = [...this.allGroups];
     }
-    /** Debounced remote search via searchFunction. */
+    /**
+     * Debounced remote search via searchFunction. Each call supersedes the previous one:
+     * a pending debounce is dropped and an in-flight request is aborted, so only the
+     * latest query's results are ever applied.
+     */
     search(filterValue, onComplete) {
-        clearTimeout(this.#timeout);
+        this.#abortPendingSearch();
         this.searching = true;
         this.#timeout = setTimeout(() => {
-            this.config.getSearchFunction()(filterValue).then((response) => {
+            const controller = new AbortController();
+            this.#searchController = controller;
+            this.config.getSearchFunction()(filterValue, controller.signal).then((response) => {
+                if (controller.signal.aborted)
+                    return;
+                this.#searchController = undefined;
                 this.convertOptions(response.object ?? []);
                 this.searching = false;
                 onComplete?.();
+            }, (error) => {
+                // Aborted requests reject by design (e.g. fetch's AbortError) — swallow those.
+                if (controller.signal.aborted)
+                    return;
+                this.#searchController = undefined;
+                this.searching = false;
+                throw error;
             });
         }, 300);
     }
+    /** Drop any pending or in-flight remote search, e.g. when the input switches to local filtering. */
+    cancelSearch() {
+        this.#abortPendingSearch();
+        this.searching = false;
+    }
+    #abortPendingSearch() {
+        clearTimeout(this.#timeout);
+        this.#searchController?.abort();
+        this.#searchController = undefined;
+    }
     /** Case-insensitive local filter over already-loaded options. */
     filterLocal(filterValue) {
         if (filterValue.length === 0) {

package/dist/models/ComboBoxItem.d.ts

@@ -23,5 +23,10 @@ export interface ComboBoxItem {
     isAddNew?: boolean;
 }
 export type FetchFunctionType = () => Promise<NotifyModel<ComboBoxItem[]>>;
-export type SearchFunctionType = (query: string) => Promise<NotifyModel<ComboBoxItem[]>>;
+/**
+ * Remote search. `signal` is aborted when a newer search supersedes this one (the user
+ * kept typing, cleared the input, or the component unmounted) — pass it to `fetch` to
+ * cancel the request. Results from superseded searches are discarded either way.
+ */
+export type SearchFunctionType = (query: string, signal?: AbortSignal) => Promise<NotifyModel<ComboBoxItem[]>>;
 export type RetrieveLabelFunctionType = (value: any) => Promise<NotifyModel<string | undefined>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@placeholderco/placeholder-ui",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "A modern, customizable Svelte 5 UI component library with comprehensive theming support. Re-brand it with a single config object.",
   "license": "MIT",
   "author": "Placeholderco",
@@ -53,7 +53,7 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-static": "^4.0.0",
-    "@sveltejs/kit": "^3.0.0",
+    "@sveltejs/kit": "^3.0.1",
     "@sveltejs/package": "^3.0.0",
     "@sveltejs/vite-plugin-svelte": "^7.3.1",
     "@types/node": "^26.6.4",
@@ -62,10 +62,10 @@
     "prettier-plugin-svelte": "^4.1.1",
     "publint": "^0.3.25",
     "rimraf": "^6.1.3",
-    "svelte": "^5.57.1",
+    "svelte": "^5.57.2",
     "svelte-check": "^4.7.6",
     "typescript": "^6.0.3",
-    "vite": "^8.3.2"
+    "vite": "^8.3.3"
   },
   "dependencies": {
     "@codemirror/autocomplete": "^6.20.3",
@@ -76,13 +76,13 @@
     "@codemirror/lang-json": "^6.0.2",
     "@codemirror/lang-markdown": "^6.5.2",
     "@codemirror/lang-sql": "^6.10.0",
-    "@codemirror/language": "^6.12.4",
-    "@codemirror/legacy-modes": "^6.5.4",
+    "@codemirror/language": "^6.13.1",
+    "@codemirror/legacy-modes": "^6.5.5",
     "@codemirror/lint": "^6.9.7",
     "@codemirror/search": "^6.7.2",
     "@codemirror/state": "^6.7.6",
     "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.43.13",
+    "@codemirror/view": "^6.43.14",
     "@lezer/highlight": "^1.2.5",
     "@tiptap/core": "^3.31.4",
     "@tiptap/extension-bubble-menu": "^3.31.4",