refine select component

Author: Jicheng Lu

src/lib/common/Select.svelte

@@ -72,15 +72,18 @@
     /** @type {boolean} */
     let loading = false;
 
+    /**
+     * @type {number | undefined}
+     */
+    let timer;
+
     onMount(() => {
         initOptions();
     });
 
     $: {
         innerOptions = verifySelectedOptions(innerOptions, selectedValues);
         refOptions = verifySelectedOptions(innerOptions, selectedValues);
-        applySearchFilter();
-        changeDisplayText();
     }
 
     $: {
@@ -105,36 +108,39 @@
                     ...newOptions
                 ];
 
-                changeDisplayText();
-            } else {
-                applySearchFilter();
-                changeDisplayText();
             }
         } else {
             innerOptions = verifySelectedOptions(options, selectedValues);
             refOptions = verifySelectedOptions(options, selectedValues);
+        }
+    }
+
+    $: {
+        if (innerOptions && refOptions) {
             applySearchFilter();
             changeDisplayText();
         }
     }
 
-
     function initOptions() {
-        innerOptions = options.map(x => {
+        const newInnerOptions = options.map(x => {
             return {
                 label: x.label,
                 value: x.value,
                 checked: false
             }
         });
 
-        refOptions = options.map(x => {
+        const newRefOptions = options.map(x => {
             return {
                 label: x.label,
                 value: x.value,
                 checked: false
             }
         });
+
+        innerOptions = newInnerOptions;
+        refOptions = newRefOptions;
     }
 
     /**
@@ -167,8 +173,11 @@
     /** @param {any} e */
     function changeSearchValue(e) {
         searchValue = e.target.value || '';
-        applySearchFilter();
-        verifySelectAll();
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            applySearchFilter();
+            verifySelectAll();
+        }, 500);
     }
 
     function applySearchFilter() {
@@ -186,7 +195,7 @@
 	 * @param {any} option
 	 */
     function checkOption(e, option) {
-        innerOptions = innerOptions.map(x => {
+        const newInnerOptions = innerOptions.map(x => {
             const item = { ...x };
             if (item.value == option.value) {
                 item.checked = e == null ? !item.checked : e.target.checked;
@@ -196,7 +205,7 @@
             return item;
         });
 
-        refOptions = refOptions.map(x => {
+        const newRefOptions = refOptions.map(x => {
             const item = { ...x };
             if (item.value == option.value) {
                 item.checked = e == null ? !item.checked : e.target.checked;
@@ -206,7 +215,9 @@
             return item;
         });
 
-        changeDisplayText();
+        innerOptions = newInnerOptions;
+        refOptions = newRefOptions;
+
         sendEvent();
         hideOptionList();
     }
@@ -219,7 +230,6 @@
         });
 
         syncChangesToRef(selectAllChecked);
-        changeDisplayText();
         sendEvent();
     }
 
@@ -320,15 +330,17 @@
     }
 
     function clearSelection() {
-        innerOptions = innerOptions.map(x => {
+        const newInnerOptions = innerOptions.map(x => {
             return { ...x, checked: false }
         });
 
-        refOptions = refOptions.map(x => {
+        const newRefOptions = refOptions.map(x => {
             return { ...x, checked: false }
         });
 
-        changeDisplayText();
+        innerOptions = newInnerOptions;
+        refOptions = newRefOptions;
+
         sendEvent();
         hideOptionList();
     }