@onsvisual/svelte-components 1.1.25 → 1.1.27

package/dist/components/Select/Select.svelte

@@ -94,13 +94,13 @@
 	 * @type {function}
 	 */
 	export let loadOptions = (query, populateResults) => {
-		const filteredResults =
-			mode !== "search" && (!query || options.map((opt) => opt[labelKey]).includes(query))
-				? options
-				: options.filter((opt) =>
-						opt[labelKey].match(new RegExp(`\\b${query.replace(/[^\w\s]/gi, "")}`, "i"))
-					);
-		populateResults(filteredResults);
+		if (mode !== "search" && (!query || options.map((opt) => opt?.[labelKey]).includes(query)))
+			populateResults(options);
+		else {
+			const regex = new RegExp(`\\b${query.replace(/[^\w\s]/gi, "")}`, "i");
+			const filteredResults = options.filter((opt) => regex.test(opt?.[labelKey]));
+			populateResults(filteredResults);
+		}
 	};
 	/**
 	 * Call this function externally to clear the input
@@ -128,7 +128,7 @@
 	}
 
 	function inputValueTemplate(result) {
-		return result && result[labelKey];
+		return result?.[labelKey] || result || "";
 	}
 
 	function highlight(text, query = "") {
@@ -140,11 +140,11 @@
 
 	function suggestionTemplate(result) {
 		const query = inputElement?.value || "";
-		return groupKey && result[groupKey]
+		return groupKey && result?.[groupKey]
 			? `${highlight(result?.[labelKey] || "", query)} <span class="muted-text">${
 					result[groupKey]
 				}</span>`
-			: highlight(result?.[labelKey] || "", query);
+			: highlight(result?.[labelKey] || result || "", query);
 	}
 
 	async function select(option) {
@@ -170,7 +170,7 @@
 			element,
 			id,
 			name,
-			defaultValue: value?.[labelKey] || undefined,
+			defaultValue: value?.[labelKey] || value || undefined,
 			source: loadOptions,
 			autoselect: true,
 			onConfirm: select,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onsvisual/svelte-components",
-	"version": "1.1.25",
+	"version": "1.1.27",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "npm run build:package && npm run build:docs",