fix(overflow-menu): dispatch "close" event when clicking outside (#1546)

Fixes #1541
carbon-design-system · Dec 8, 2022 · 837716f · 837716f
1 parent ba62f45
commit 837716f
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 11 deletions.
diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
@@ -2615,14 +2615,14 @@ None.
 
 ### Events
 
-| Event name | Type       | Detail                                        |
-| :--------- | :--------- | :-------------------------------------------- |
-| close      | dispatched | <code>{ index: number; text: string; }</code> |
-| click      | forwarded  | --                                            |
-| mouseover  | forwarded  | --                                            |
-| mouseenter | forwarded  | --                                            |
-| mouseleave | forwarded  | --                                            |
-| keydown    | forwarded  | --                                            |
+| Event name | Type       | Detail                                                    |
+| :--------- | :--------- | :-------------------------------------------------------- |
+| close      | dispatched | <code>null &#124; { index: number; text: string; }</code> |
+| click      | forwarded  | --                                                        |
+| mouseover  | forwarded  | --                                                        |
+| mouseenter | forwarded  | --                                                        |
+| mouseleave | forwarded  | --                                                        |
+| keydown    | forwarded  | --                                                        |
 
 ## `OverflowMenuItem`
 

diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
@@ -8063,7 +8063,7 @@
         {
           "type": "dispatched",
           "name": "close",
-          "detail": "{ index: number; text: string; }"
+          "detail": "null | { index: number; text: string; }"
         },
         { "type": "forwarded", "name": "click", "element": "button" },
         { "type": "forwarded", "name": "mouseover", "element": "button" },

diff --git a/src/OverflowMenu/OverflowMenu.svelte b/src/OverflowMenu/OverflowMenu.svelte
@@ -1,6 +1,6 @@
 <script>
   /**
-   * @event {{ index: number; text: string; }} close
+   * @event {null | { index: number; text: string; }} close
    */
 
   /**
@@ -205,6 +205,7 @@
   on:click="{({ target }) => {
     if (!(menuRef && menuRef.contains(target))) {
       open = !open;
+      if (!open) dispatch('close');
     }
   }}"
   on:mouseover
@@ -217,6 +218,7 @@
         e.preventDefault();
       } else if (e.key === 'Escape') {
         e.stopPropagation();
+        dispatch('close');
         open = false;
         buttonRef.focus();
       }
@@ -225,6 +227,7 @@
   on:focusout="{(e) => {
     if (open) {
       if (!buttonRef.contains(e.relatedTarget)) {
+        dispatch('close');
         open = false;
       }
     }

diff --git a/types/OverflowMenu/OverflowMenu.svelte.d.ts b/types/OverflowMenu/OverflowMenu.svelte.d.ts
@@ -80,7 +80,7 @@ export interface OverflowMenuProps
 export default class OverflowMenu extends SvelteComponentTyped<
   OverflowMenuProps,
   {
-    close: CustomEvent<{ index: number; text: string }>;
+    close: CustomEvent<null | { index: number; text: string }>;
     click: WindowEventMap["click"];
     mouseover: WindowEventMap["mouseover"];
     mouseenter: WindowEventMap["mouseenter"];