fix(overflow-menu): support Svelte 5

Fixes #2092
carbon-design-system · Jan 30, 2025 · 88f4304 · 88f4304
1 parent f61e316
commit 88f4304
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 20 deletions.
diff --git a/src/OverflowMenu/OverflowMenu.svelte b/src/OverflowMenu/OverflowMenu.svelte
@@ -81,6 +81,7 @@
 
   setContext("OverflowMenu", {
     focusedId,
+    items,
     add: ({ id, text, primaryFocus, disabled }) => {
       items.update((_) => {
         if (primaryFocus) {
@@ -90,8 +91,11 @@
         return [..._, { id, text, primaryFocus, disabled, index: _.length }];
       });
     },
-    update: (id) => {
+    update: (id, item) => {
       currentId.set(id);
+
+      dispatch("close", { index: item.index, text: item.text });
+      open = false;
     },
     change: (direction) => {
       let index = $currentIndex + direction;
@@ -121,12 +125,6 @@
   });
 
   afterUpdate(() => {
-    if ($currentId) {
-      const { index, text } = $items.filter((_) => _.id === $currentId)[0];
-      dispatch("close", { index, text });
-      open = false;
-    }
-
     if (open) {
       const width = buttonRef.offsetWidth;
       const height = buttonRef.offsetHeight;
@@ -183,6 +181,7 @@
   on:click={({ target }) => {
     if (buttonRef && buttonRef.contains(target)) return;
     if (menuRef && !menuRef.contains(target)) {
+      dispatch("close");
       open = false;
     }
   }}
@@ -225,14 +224,6 @@
       }
     }
   }}
-  on:focusout={(e) => {
-    if (open) {
-      if (!buttonRef.contains(e.relatedTarget)) {
-        dispatch("close");
-        open = false;
-      }
-    }
-  }}
 >
   <slot name="menu">
     <svelte:component

diff --git a/src/OverflowMenu/OverflowMenuItem.svelte b/src/OverflowMenu/OverflowMenuItem.svelte
@@ -31,7 +31,9 @@
 
   import { getContext, afterUpdate } from "svelte";
 
-  const { focusedId, add, update, change } = getContext("OverflowMenu");
+  const { focusedId, add, update, change, items } = getContext("OverflowMenu");
+
+  $: item = $items.find((_) => _.id === id);
 
   add({ id, text, primaryFocus, disabled });
 
@@ -68,8 +70,9 @@
       bind:this={ref}
       {...buttonProps}
       on:click
-      on:click={() => {
-        update(id);
+      on:click={(e) => {
+        e.stopPropagation();
+        update(id, item);
       }}
       on:keydown
       on:keydown={({ key }) => {
@@ -91,8 +94,9 @@
       bind:this={ref}
       {...buttonProps}
       on:click
-      on:click={() => {
-        update(id);
+      on:click={(e) => {
+        e.stopPropagation();
+        update(id, item);
       }}
       on:keydown
       on:keydown={({ key }) => {