rob-balfre / svelte-select

Svelte Select. A select component for Svelte
https://svelte-select-examples.vercel.app
Other
1.27k stars 180 forks source link

Filter text isn't trimmed #697

Open samal-rasmussen opened 1 month ago

samal-rasmussen commented 1 month ago

Steps to reproduce: Open https://svelte-select-examples.vercel.app/examples/props/filter-text Write " one" with a leading space character.

Expected result: The One option is shown. Actual result: Nothing is shown.

samal-rasmussen commented 1 month ago

patch-package patch:

@@ -0,0 +1,13 @@
diff --git a/node_modules/svelte-select/Select.svelte b/node_modules/svelte-select/Select.svelte
index 88f875a..e44a24b 100644
--- a/node_modules/svelte-select/Select.svelte
+++ b/node_modules/svelte-select/Select.svelte
@@ -31,7 +31,7 @@
     export let placeholderAlwaysShow = false;
     export let items = null;
     export let label = 'label';
-    export let itemFilter = (label, filterText, option) => `${label}`.toLowerCase().includes(filterText.toLowerCase());
+    export let itemFilter = (label, filterText, option) => `${label}`.toLowerCase().includes(filterText.toLowerCase().trim());
     export let groupBy = undefined;
     export let groupFilter = (groups) => groups;
     export let groupHeaderSelectable = false;
samal-rasmussen commented 1 month ago

Also if you like to disregard accents in your match:

@@ -0,0 +1,24 @@
diff --git a/node_modules/svelte-select/Select.svelte b/node_modules/svelte-select/Select.svelte
index 88f875a..62ee7fa 100644
--- a/node_modules/svelte-select/Select.svelte
+++ b/node_modules/svelte-select/Select.svelte
@@ -31,7 +31,18 @@
     export let placeholderAlwaysShow = false;
     export let items = null;
     export let label = 'label';
-    export let itemFilter = (label, filterText, option) => `${label}`.toLowerCase().includes(filterText.toLowerCase());
+    export let itemFilter = (label, filterText, option) => {
+        const l = `${label}`.toLowerCase();
+        const f = filterText.toLowerCase().trim();
+        const unNormalizedMatch = l.includes(f);
+        const normalizedMatch =
+            l.normalize('NFD')
+            .replace(/\p{Diacritic}/gu, "")
+            .includes(
+                f.normalize('NFD').replace(/\p{Diacritic}/gu, "")
+            );
+        return unNormalizedMatch || normalizedMatch;
+    };
     export let groupBy = undefined;
     export let groupFilter = (groups) => groups;
     export let groupHeaderSelectable = false;

https://stackoverflow.com/questions/990904/remove-accents-diacritics-in-a-string-in-javascript