From 63f52b46836f5a24aeb06630689245999f5c5fec Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Thu, 10 Feb 2022 08:27:09 -0800
Subject: [PATCH] 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                        | 2 +-
 docs/src/COMPONENT_API.json               | 8 ++++++--
 package.json                              | 2 +-
 src/MultiSelect/MultiSelect.svelte        | 7 +++++++
 tests/MultiSelect.test.svelte             | 3 +++
 types/MultiSelect/MultiSelect.svelte.d.ts | 2 +-
 yarn.lock                                 | 8 ++++----
 7 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index a34b1d40..4b732219 100644
--- a/COMPONENT_INDEX.md
+++ b/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`
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 0472a252..2c1a7b6a 100644
--- a/docs/src/COMPONENT_API.json
+++ b/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": [
         {
diff --git a/package.json b/package.json
index 52a519bc..e7609c78 100644
--- a/package.json
+++ b/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"
diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte
index c90fdeda..0d6130af 100644
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/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}"
diff --git a/tests/MultiSelect.test.svelte b/tests/MultiSelect.test.svelte
index e06961ef..cfd1df55 100644
--- a/tests/MultiSelect.test.svelte
+++ b/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
diff --git a/types/MultiSelect/MultiSelect.svelte.d.ts b/types/MultiSelect/MultiSelect.svelte.d.ts
index a568e26f..973f6545 100644
--- a/types/MultiSelect/MultiSelect.svelte.d.ts
+++ b/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"];
   },
   {}
 > {}
diff --git a/yarn.lock b/yarn.lock
index d84bc1df..5598a1e1 100644
--- a/yarn.lock
+++ b/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"