fix(multi-select): non-filterable MultiSelect should dispatch a blur event (#1080)

The non-filterable `MultiSelect` is missing a `blur` event.

Implementation-wise, we have to dispatch it and include the event as the `detail`. Otherwise, the filterable variant will dispatch "blur" twice because it has both a button and input.

The filterable `MultiSelect` continues to forward the blur event to the input.

COMPONENT_INDEX.md

@@ -2461,12 +2461,12 @@ None.
 
 | Event name | Type       | Detail                                                                                                         |
 | :--------- | :--------- | :------------------------------------------------------------------------------------------------------------- |
+| blur       | dispatched | <code>FocusEvent &#124; CustomEvent<FocusEvent></code>                                                         |
 | select     | dispatched | <code>{ selectedIds: MultiSelectItemId[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }</code> |
 | clear      | dispatched | <code>any</code>                                                                                               |
 | keydown    | forwarded  | --                                                                                                             |
 | keyup      | forwarded  | --                                                                                                             |
 | focus      | forwarded  | --                                                                                                             |
-| blur       | forwarded  | --                                                                                                             |
 
 ## `NotificationActionButton`
 

docs/src/COMPONENT_API.json

@@ -6776,6 +6776,11 @@
       ],
       "slots": [],
       "events": [
+        {
+          "type": "dispatched",
+          "name": "blur",
+          "detail": "FocusEvent | CustomEvent<FocusEvent>"
+        },
         {
           "type": "dispatched",
           "name": "select",
@@ -6784,8 +6789,7 @@
         { "type": "dispatched", "name": "clear", "detail": "any" },
         { "type": "forwarded", "name": "keydown", "element": "input" },
         { "type": "forwarded", "name": "keyup", "element": "input" },
-        { "type": "forwarded", "name": "focus", "element": "input" },
-        { "type": "forwarded", "name": "blur", "element": "input" }
+        { "type": "forwarded", "name": "focus", "element": "input" }
       ],
       "typedefs": [
         {

package.json

@@ -42,7 +42,7 @@
     "rollup-plugin-svelte": "^7.1.0",
     "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.42.1",
-    "sveld": "^0.13.1",
+    "sveld": "^0.13.2",
     "svelte": "^3.45.0",
     "svelte-check": "^1.1.32",
     "typescript": "^4.1.3"

src/MultiSelect/MultiSelect.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {FocusEvent | CustomEvent<FocusEvent>} blur
+   */
+
   /**
    * @typedef {any} MultiSelectItemId
    * @typedef {string} MultiSelectItemText
@@ -337,6 +341,9 @@
           if (inputRef) inputRef.focus();
         }
       }}"
+      on:blur="{(e) => {
+        if (!filterable) dispatch('blur', e);
+      }}"
       id="{id}"
       disabled="{disabled}"
       translateWithId="{translateWithId}"

tests/MultiSelect.test.svelte

@@ -17,6 +17,9 @@
     console.log(e.detail.selected);
     console.log(e.detail.unselected);
   }}"
+  on:blur="{(e) => {
+    e.detail; // number | FocusEvent
+  }}"
 />
 
 <MultiSelect

types/MultiSelect/MultiSelect.svelte.d.ts

@@ -212,6 +212,7 @@ export interface MultiSelectProps
 export default class MultiSelect extends SvelteComponentTyped<
   MultiSelectProps,
   {
+    blur: FocusEvent | CustomEvent<FocusEvent>;
     select: CustomEvent<{
       selectedIds: MultiSelectItemId[];
       selected: MultiSelectItem[];
@@ -221,7 +222,6 @@ export default class MultiSelect extends SvelteComponentTyped<
     keydown: WindowEventMap["keydown"];
     keyup: WindowEventMap["keyup"];
     focus: WindowEventMap["focus"];
-    blur: WindowEventMap["blur"];
   },
   {}
 > {}

yarn.lock

@@ -2299,10 +2299,10 @@ supports-color@^7.0.0, supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-sveld@^0.13.1:
-  version "0.13.1"
-  resolved "https://registry.yarnpkg.com/sveld/-/sveld-0.13.1.tgz#a436398435643b2d4a650c600e9e702049fe5a9c"
-  integrity sha512-CVrFYoZoEnG8/XDhr9JXTTwtRbQwndB1dmG2SQieKjHjeWzLWv0ibJwLEpcegThbPFGCh2L9nR4iQhmVq9Gq6g==
+sveld@^0.13.2:
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/sveld/-/sveld-0.13.2.tgz#303a482b8c37ae33229e5c818b92252613ae9f6b"
+  integrity sha512-IrDJF7LkgIve0BAgRF2/Kyc6Aize52Bh6KY/IkEuo5sEBtc2VRK83t0XFlCZtgjBFJarsd83sLx+JqjsJXvjSg==
   dependencies:
     "@rollup/plugin-node-resolve" "^11.0.1"
     acorn "^8.4.1"