@kws3/ui 2.3.1 → 2.3.3

package/CHANGELOG.mdx

@@ -1,3 +1,13 @@
+# 2.3.3
+  - `InfiniteList` - do not fake a scroll event on a resize event, fixes loading bugs
+
+# 2.3.2
+  - `MultiSelect` - fixed issue where raw object were initially outputted (if provided)
+  - `SearchableSelect and `MultiSelect` (Async): resolved issue with the 'active' class not attaching to the most matched item in dropdown options
+  - `SearchableSelect` - improved behavior, ensuring the `tab` key correctly loses focus
+  - `AutoComplete` - dropdown now closes on loss of focus triggered by the `tab` key
+
+
 # 2.3.1
   - `DatePicker` - add support for configurable border radius
   - `DatePicker` - add support for configurable box shadow

package/forms/AutoComplete.svelte

@@ -421,7 +421,12 @@ Default value: `<span>{option.label}</span>`
       });
     } else {
       active_option = "";
-      searching = true;
+
+      if (event.key === `Tab`) {
+        searching = false;
+      } else {
+        searching = true;
+      }
     }
   }
 

package/forms/select/MultiSelect.svelte

@@ -470,7 +470,7 @@ Default value: `<span>{option[search_key] || option}</span>`
     ) {
       activeOption = filteredOptions[0];
     } else {
-      if (allow_fuzzy_match) {
+      if (asyncMode || allow_fuzzy_match) {
         activeOption = filteredOptions.find((opts) =>
           matchesValue(activeOption, opts)
         );
@@ -557,22 +557,28 @@ Default value: `<span>{option[search_key] || option}</span>`
     //normalize value for single versus multiselect
     if (value === null || typeof value == "undefined") {
       value = single ? null : [];
-    }
-
-    if (asyncMode) {
-      // initally on async mode options are empty
-      // so we need to fill selectedOptions with value if value is avaliable
-      options = value ? [...(single ? [value] : [...value])] : [];
-      searching = false;
-      tick().then(() => {
-        normaliseOptions();
-        value = normaliseArraysToObjects(options).map((v) => v[used_value_key]);
-        if (single && Array.isArray(value)) {
-          value = value[0];
-        }
-        fillSelectedOptions();
-        clearDropDownResults();
-      });
+    } else {
+      if (asyncMode) {
+        // initally on async mode options are empty
+        // so we need to fill selectedOptions with value if value is avaliable
+        options = value ? [...(single ? [value] : [...value])] : [];
+        searching = false;
+        tick().then(() => {
+          normaliseOptions();
+          value = normaliseArraysToObjects(options).map(
+            (v) => v[used_value_key]
+          );
+          if (single && Array.isArray(value)) {
+            value = value[0];
+          }
+          fillSelectedOptions();
+          clearDropDownResults();
+        });
+      } else {
+        value = single
+          ? value
+          : normaliseArraysToObjects(value).map((v) => v[used_value_key]);
+      }
     }
 
     return () => {
@@ -729,6 +735,10 @@ Default value: `<span>{option[search_key] || option}</span>`
         searching = true;
       }
     } else {
+      if (event.key === `Tab`) {
+        searching = false;
+        return;
+      }
       //for a single select
       //if a value is already selected,
       //ignore keys other than navigation, enter and backspace

package/helpers/InfiniteList.svelte

@@ -131,6 +131,5 @@ while more items are loading
 
   const resize = () => {
     viewport_height = viewport.offsetHeight;
-    handle_scroll();
   };
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "2.3.1",
+  "version": "2.3.3",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "svelte": "index.js",
@@ -35,5 +35,5 @@
   "devDependencies": {
     "typescript": "^5.0.4"
   },
-  "gitHead": "c617cd16beda41c5cb580bb8b6d0e562ec07da50"
+  "gitHead": "f2433c3417de63b6e7e3f64c3eff524d7fa0fd9c"
 }