From 4a80561453e206f339e207e4ce6fca789613493d Mon Sep 17 00:00:00 2001
From: kamalrohra <kamal.rohra@think360.ai>
Date: Fri, 6 Oct 2023 00:39:02 +0530
Subject: [PATCH 1/2] bug: unmatched div tag in menu-item.template.ts

---
 .../src/menu-item/menu-item.template.ts       | 126 +++++++++---------
 1 file changed, 65 insertions(+), 61 deletions(-)

diff --git a/packages/web-components/fast-foundation/src/menu-item/menu-item.template.ts b/packages/web-components/fast-foundation/src/menu-item/menu-item.template.ts
index e6794376700..d729ca3df0d 100644
--- a/packages/web-components/fast-foundation/src/menu-item/menu-item.template.ts
+++ b/packages/web-components/fast-foundation/src/menu-item/menu-item.template.ts
@@ -21,72 +21,76 @@ export function menuItemTemplate<T extends FASTMenuItem>(
     options: MenuItemOptions = {}
 ): ElementViewTemplate<T> {
     return html<T>`
-    <template
-        aria-haspopup="${x => (x.hasSubmenu ? "menu" : void 0)}"
-        aria-checked="${x => (x.role !== MenuItemRole.menuitem ? x.checked : void 0)}"
-        aria-disabled="${x => x.disabled}"
-        aria-expanded="${x => x.expanded}"
-        @keydown="${(x, c) => x.handleMenuItemKeyDown(c.event as KeyboardEvent)}"
-        @click="${(x, c) => x.handleMenuItemClick(c.event as MouseEvent)}"
-        @mouseover="${(x, c) => x.handleMouseOver(c.event as MouseEvent)}"
-        @mouseout="${(x, c) => x.handleMouseOut(c.event as MouseEvent)}"
-    >
-            ${when(
-                x => x.role === MenuItemRole.menuitemcheckbox,
-                html<FASTMenuItem>`
-                    <div part="input-container" class="input-container">
-                        <span part="checkbox" class="checkbox">
-                            <slot name="checkbox-indicator">
-                                ${staticallyCompose(options.checkboxIndicator)}
-                            </slot>
-                        </span>
-                    </div>
-                `
-            )}
+        <template
+            aria-haspopup="${x => (x.hasSubmenu ? "menu" : void 0)}"
+            aria-checked="${x => (x.role !== MenuItemRole.menuitem ? x.checked : void 0)}"
+            aria-disabled="${x => x.disabled}"
+            aria-expanded="${x => x.expanded}"
+            @keydown="${(x, c) => x.handleMenuItemKeyDown(c.event as KeyboardEvent)}"
+            @click="${(x, c) => x.handleMenuItemClick(c.event as MouseEvent)}"
+            @mouseover="${(x, c) => x.handleMouseOver(c.event as MouseEvent)}"
+            @mouseout="${(x, c) => x.handleMouseOut(c.event as MouseEvent)}"
+        >
+            <div>
+                ${when(
+                    x => x.role === MenuItemRole.menuitemcheckbox,
+                    html<FASTMenuItem>`
+                        <div part="input-container" class="input-container">
+                            <span part="checkbox" class="checkbox">
+                                <slot name="checkbox-indicator">
+                                    ${staticallyCompose(options.checkboxIndicator)}
+                                </slot>
+                            </span>
+                        </div>
+                    `
+                )}
+                ${when(
+                    x => x.role === MenuItemRole.menuitemradio,
+                    html<FASTMenuItem>`
+                        <div part="input-container" class="input-container">
+                            <span part="radio" class="radio">
+                                <slot name="radio-indicator">
+                                    ${staticallyCompose(options.radioIndicator)}
+                                </slot>
+                            </span>
+                        </div>
+                    `
+                )}
+            </div>
+            ${startSlotTemplate(options)}
+            <span class="content" part="content">
+                <slot></slot>
+            </span>
+            ${endSlotTemplate(options)}
             ${when(
-                x => x.role === MenuItemRole.menuitemradio,
-                html<FASTMenuItem>`
-                    <div part="input-container" class="input-container">
-                        <span part="radio" class="radio">
-                            <slot name="radio-indicator">
-                                ${staticallyCompose(options.radioIndicator)}
+                x => x.hasSubmenu,
+                html<T>`
+                    <div
+                        part="expand-collapse-glyph-container"
+                        class="expand-collapse-glyph-container"
+                    >
+                        <span part="expand-collapse" class="expand-collapse">
+                            <slot name="expand-collapse-indicator">
+                                ${staticallyCompose(options.expandCollapseGlyph)}
                             </slot>
                         </span>
                     </div>
                 `
             )}
-        </div>
-        ${startSlotTemplate(options)}
-        <span class="content" part="content">
-            <slot></slot>
-        </span>
-        ${endSlotTemplate(options)}
-        ${when(
-            x => x.hasSubmenu,
-            html<T>`
-                <div
-                    part="expand-collapse-glyph-container"
-                    class="expand-collapse-glyph-container"
-                >
-                    <span part="expand-collapse" class="expand-collapse">
-                        <slot name="expand-collapse-indicator">
-                            ${staticallyCompose(options.expandCollapseGlyph)}
-                        </slot>
-                    </span>
-                </div>
-            `
-        )}
-        <span
-            ?hidden="${x => !x.expanded}"
-            class="submenu-container"
-            part="submenu-container"
-            ${ref("submenuContainer")}
-        >
-            <slot name="submenu" ${slotted({
-                property: "slottedSubmenu",
-                filter: elements("[role='menu']"),
-            })}></slot>
-        </span>
-    </template>
+            <span
+                ?hidden="${x => !x.expanded}"
+                class="submenu-container"
+                part="submenu-container"
+                ${ref("submenuContainer")}
+            >
+                <slot
+                    name="submenu"
+                    ${slotted({
+                        property: "slottedSubmenu",
+                        filter: elements("[role='menu']"),
+                    })}
+                ></slot>
+            </span>
+        </template>
     `;
 }

From ecebe1c4134828b84da06fe698c8ba4234c5e4fa Mon Sep 17 00:00:00 2001
From: kamalrohra <kamal.rohra@think360.ai>
Date: Sat, 7 Oct 2023 23:00:47 +0530
Subject: [PATCH 2/2] bug: removed the div tag

---
 .../src/menu-item/menu-item.template.ts       | 50 +++++++++----------
 1 file changed, 24 insertions(+), 26 deletions(-)

diff --git a/packages/web-components/fast-foundation/src/menu-item/menu-item.template.ts b/packages/web-components/fast-foundation/src/menu-item/menu-item.template.ts
index d729ca3df0d..6cdf03d3bd2 100644
--- a/packages/web-components/fast-foundation/src/menu-item/menu-item.template.ts
+++ b/packages/web-components/fast-foundation/src/menu-item/menu-item.template.ts
@@ -31,32 +31,30 @@ export function menuItemTemplate<T extends FASTMenuItem>(
             @mouseover="${(x, c) => x.handleMouseOver(c.event as MouseEvent)}"
             @mouseout="${(x, c) => x.handleMouseOut(c.event as MouseEvent)}"
         >
-            <div>
-                ${when(
-                    x => x.role === MenuItemRole.menuitemcheckbox,
-                    html<FASTMenuItem>`
-                        <div part="input-container" class="input-container">
-                            <span part="checkbox" class="checkbox">
-                                <slot name="checkbox-indicator">
-                                    ${staticallyCompose(options.checkboxIndicator)}
-                                </slot>
-                            </span>
-                        </div>
-                    `
-                )}
-                ${when(
-                    x => x.role === MenuItemRole.menuitemradio,
-                    html<FASTMenuItem>`
-                        <div part="input-container" class="input-container">
-                            <span part="radio" class="radio">
-                                <slot name="radio-indicator">
-                                    ${staticallyCompose(options.radioIndicator)}
-                                </slot>
-                            </span>
-                        </div>
-                    `
-                )}
-            </div>
+            ${when(
+                x => x.role === MenuItemRole.menuitemcheckbox,
+                html<FASTMenuItem>`
+                    <div part="input-container" class="input-container">
+                        <span part="checkbox" class="checkbox">
+                            <slot name="checkbox-indicator">
+                                ${staticallyCompose(options.checkboxIndicator)}
+                            </slot>
+                        </span>
+                    </div>
+                `
+            )}
+            ${when(
+                x => x.role === MenuItemRole.menuitemradio,
+                html<FASTMenuItem>`
+                    <div part="input-container" class="input-container">
+                        <span part="radio" class="radio">
+                            <slot name="radio-indicator">
+                                ${staticallyCompose(options.radioIndicator)}
+                            </slot>
+                        </span>
+                    </div>
+                `
+            )}
             ${startSlotTemplate(options)}
             <span class="content" part="content">
                 <slot></slot>