From 5bdcd554f08099f6228239675de8e657e1bf269f Mon Sep 17 00:00:00 2001
From: Rahul Suvarna <rahulsuvarna@Mac.local>
Date: Mon, 14 Sep 2026 15:21:22 +0200
Subject: [PATCH] fix: added a play function to resolve menu template closing
 on clicks outside the component

---
 .changeset/neat-feet-grow.md                  |  5 ++++
 .../src/stories/templates/menu.stories.ts     | 30 +++++++++++++++++--
 .../packages/icons/default/system.json        | 30 +++++++++----------
 .../mcp/metadata/packages/templates/menu.md   |  4 +--
 4 files changed, 50 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/neat-feet-grow.md

diff --git a/.changeset/neat-feet-grow.md b/.changeset/neat-feet-grow.md
new file mode 100644
index 0000000000..3caa3b60e6
--- /dev/null
+++ b/.changeset/neat-feet-grow.md
@@ -0,0 +1,5 @@
+---
+'@solid-design-system/docs': patch
+---
+
+Fixed menu template dropdowns closing on clicks outside the dropdown component.
diff --git a/packages/docs/src/stories/templates/menu.stories.ts b/packages/docs/src/stories/templates/menu.stories.ts
index ba211fc633..6ec4c76402 100644
--- a/packages/docs/src/stories/templates/menu.stories.ts
+++ b/packages/docs/src/stories/templates/menu.stories.ts
@@ -34,8 +34,20 @@ export default {
 
 export const MenuWithIcons = {
   name: 'Menu with Icons',
+  parameters: {
+    docs: { story: { autoplay: true } }
+  },
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    await customElements.whenDefined('sd-dropdown');
+
+    const dropdown = canvasElement.querySelector<HTMLElement & { containingElement: HTMLElement }>('#menu-with-icons');
+
+    if (dropdown) {
+      dropdown.containingElement = canvasElement.ownerDocument.body;
+    }
+  },
   render: () =>
-    html` <sd-dropdown distance="4" rounded open stay-open-on-select>
+    html` <sd-dropdown id="menu-with-icons" distance="4" rounded open stay-open-on-select>
       <sd-button variant="secondary" slot="trigger">
         <sd-icon name="system/more-functions" label="Icon only"></sd-icon>
       </sd-button>
@@ -61,8 +73,22 @@ export const MenuWithIcons = {
 
 export const MenuWithCheckmarksAndIcons = {
   name: 'Menu with Checkmarks and Icons',
+  parameters: {
+    docs: { story: { autoplay: true } }
+  },
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    await customElements.whenDefined('sd-dropdown');
+
+    const dropdown = canvasElement.querySelector<HTMLElement & { containingElement: HTMLElement }>(
+      '#menu-with-checkmarks'
+    );
+
+    if (dropdown) {
+      dropdown.containingElement = canvasElement.ownerDocument.body;
+    }
+  },
   render: () => html`
-    <sd-dropdown distance="4" rounded open stay-open-on-select>
+    <sd-dropdown id="menu-with-checkmarks" distance="4" rounded open stay-open-on-select>
       <sd-button variant="secondary" slot="trigger">
         <sd-icon name="system/more-functions" label="Icon only"></sd-icon>
       </sd-button>
diff --git a/packages/mcp/metadata/packages/icons/default/system.json b/packages/mcp/metadata/packages/icons/default/system.json
index e3420a1025..7988272aab 100644
--- a/packages/mcp/metadata/packages/icons/default/system.json
+++ b/packages/mcp/metadata/packages/icons/default/system.json
@@ -314,16 +314,16 @@
     "displayNameDe": "einklappen unten",
     "tags": ["verstecken", "komprimieren", "Seitenleiste"]
   },
-  {
-    "technicalId": "bug",
-    "displayNameDe": "Fehler",
-    "tags": ["Mangel", "Problem"]
-  },
   {
     "technicalId": "shopping-cart",
     "displayNameDe": "Einkaufswagen",
     "tags": ["Onlineshop", "Warenkorb", "Erwerb", "Einkauf"]
   },
+  {
+    "technicalId": "bug",
+    "displayNameDe": "Fehler",
+    "tags": ["Mangel", "Problem"]
+  },
   {
     "technicalId": "eraser",
     "displayNameDe": "Radiergummi",
@@ -614,16 +614,16 @@
     "displayNameDe": "Bildschirm Cursor",
     "tags": ["klicken", "auswählen"]
   },
-  {
-    "technicalId": "layers",
-    "displayNameDe": "Ebenen",
-    "tags": ["gruppieren", "Stapel", "mehrere Folien erzeugen"]
-  },
   {
     "technicalId": "file-read-out",
     "displayNameDe": "Dokument vorlesen",
     "tags": ["vorlesen", "Audio", "Lautstärke"]
   },
+  {
+    "technicalId": "layers",
+    "displayNameDe": "Ebenen",
+    "tags": ["gruppieren", "Stapel", "mehrere Folien erzeugen"]
+  },
   {
     "technicalId": "collapse-left",
     "displayNameDe": "einklappen links",
@@ -1044,16 +1044,16 @@
     "displayNameDe": "antworten",
     "tags": ["Rückmeldung", "Nachricht", "Kommunikation"]
   },
-  {
-    "technicalId": "e-mail-send",
-    "displayNameDe": "E-Mail abschicken",
-    "tags": ["Brief", "E-Mail", "Kommunikation"]
-  },
   {
     "technicalId": "password",
     "displayNameDe": "Passwort",
     "tags": ["sicherheitsgeschützt", "privat", "verschlüsselt"]
   },
+  {
+    "technicalId": "e-mail-send",
+    "displayNameDe": "E-Mail abschicken",
+    "tags": ["Brief", "E-Mail", "Kommunikation"]
+  },
   {
     "technicalId": "e-mail-exclamation",
     "displayNameDe": "E-Mail Ausrufezeichen",
diff --git a/packages/mcp/metadata/packages/templates/menu.md b/packages/mcp/metadata/packages/templates/menu.md
index 229e667779..6b41c9b759 100644
--- a/packages/mcp/metadata/packages/templates/menu.md
+++ b/packages/mcp/metadata/packages/templates/menu.md
@@ -14,7 +14,7 @@ version: 1.0.0
 ## Template: Menu with Icons
 
 ```html
-<sd-dropdown distance="4" rounded open stay-open-on-select>
+<sd-dropdown id="menu-with-icons" distance="4" rounded open stay-open-on-select>
   <sd-button variant="secondary" slot="trigger">
     <sd-icon name="system/more-functions" label="Icon only"></sd-icon>
   </sd-button>
@@ -37,7 +37,7 @@ version: 1.0.0
 ## Template: Menu with Checkmarks and Icons
 
 ```html
-<sd-dropdown distance="4" rounded open stay-open-on-select>
+<sd-dropdown id="menu-with-checkmarks" distance="4" rounded open stay-open-on-select>
   <sd-button variant="secondary" slot="trigger">
     <sd-icon name="system/more-functions" label="Icon only"></sd-icon>
   </sd-button>