From ac2efdfaea4e9af0dd8ba9077081901dc8173249 Mon Sep 17 00:00:00 2001
From: AbsoluteC2H6O <alfredofp63@gmail.com>
Date: Thu, 24 Apr 2025 01:18:53 -0400
Subject: [PATCH 1/2] fix(menu): properly handle submenu expansion

Correcting menu.
---
 src/components/compounds/Menu/MenuItem.vue | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/compounds/Menu/MenuItem.vue b/src/components/compounds/Menu/MenuItem.vue
index 2511f79..4e36616 100644
--- a/src/components/compounds/Menu/MenuItem.vue
+++ b/src/components/compounds/Menu/MenuItem.vue
@@ -28,13 +28,11 @@ const emit = defineEmits<{
   (e: "update:active", value: boolean): void;
 }>();
 
-const active = ref(props.active);
 const expanded = ref(props.expanded);
 const content = ref<HTMLElement | null>(null);
 
 // Sync with props
 watchEffect(() => {
-  active.value = props.active;
   expanded.value = props.expanded;
 });
 
@@ -46,13 +44,11 @@ const onClick = (event: Event) => {
 
   // Toggle expansion state
   const newExpanded = !expanded.value;
-  const newActive = !active.value;
   expanded.value = newExpanded;
-  active.value = newActive;
   // Emit changes to parent
   emit("update:expanded", newExpanded);
-  if (newActive) {
-    emit("update:active", newActive);
+  if (!props.active) {
+    emit("update:active", true);
   }
 };
 </script>

From 180a4ed10f7dc05916ddd7aeae0b51c3c0d80e09 Mon Sep 17 00:00:00 2001
From: AbsoluteC2H6O <alfredofp63@gmail.com>
Date: Thu, 24 Apr 2025 09:28:04 -0400
Subject: [PATCH 2/2] fix(menu): properly handle submenu expansion

Correcting menu testing and submenu expansion
---
 src/components/compounds/Menu/MenuItem.vue | 48 +++++++++++++++-------
 1 file changed, 33 insertions(+), 15 deletions(-)

diff --git a/src/components/compounds/Menu/MenuItem.vue b/src/components/compounds/Menu/MenuItem.vue
index 4e36616..de260bb 100644
--- a/src/components/compounds/Menu/MenuItem.vue
+++ b/src/components/compounds/Menu/MenuItem.vue
@@ -1,9 +1,5 @@
 <script setup lang="ts">
-import { ref, watchEffect } from "vue";
-
-defineOptions({
-  inheritAttrs: false,
-});
+import { ref, useSlots, watchEffect } from "vue";
 
 const props = withDefaults(
   defineProps<{
@@ -23,31 +19,46 @@ const props = withDefaults(
   },
 );
 
+// Notice we add the "click" event here.
 const emit = defineEmits<{
   (e: "update:expanded", value: boolean): void;
   (e: "update:active", value: boolean): void;
+  (e: "click", event: Event): void;
 }>();
 
-const expanded = ref(props.expanded);
 const content = ref<HTMLElement | null>(null);
+const expanded = ref(props.expanded);
+// Create a local state for active so that once activated it stays true.
+const activeLocal = ref(props.active);
+const slots = useSlots();
 
-// Sync with props
+// Keep the local expanded state in sync with the prop.
 watchEffect(() => {
   expanded.value = props.expanded;
 });
 
+// Also update the local active state if the parent prop changes:
+watchEffect(() => {
+  activeLocal.value = props.active;
+});
+
 const onClick = (event: Event) => {
   if (props.disabled) {
     event.preventDefault();
     return;
   }
 
-  // Toggle expansion state
+  // Emit the native click event so that the test can detect it.
+  emit("click", event);
+
+  // Always toggle the expanded state (regardless of whether a default slot exists).
   const newExpanded = !expanded.value;
   expanded.value = newExpanded;
-  // Emit changes to parent
   emit("update:expanded", newExpanded);
-  if (!props.active) {
+
+  // Emit update:active only if we aren’t already active.
+  if (!activeLocal.value) {
+    activeLocal.value = true;
     emit("update:active", true);
   }
 };
@@ -55,11 +66,18 @@ const onClick = (event: Event) => {
 
 <template>
   <li class="li" :role="ariaRole" ref="content" :aria-expanded="expanded">
-    <component :is="tag" v-bind="$attrs" :class="{
-      'is-flex': icon,
-      'is-active': active,
-      'is-disabled': disabled
-    }" :aria-disabled="disabled" @click="onClick" @keydown.enter="onClick">
+    <component
+      :is="tag"
+      v-bind="$attrs"
+      :class="{
+        'is-flex': icon,
+        'is-active': active,
+        'is-disabled': disabled
+      }"
+      :aria-disabled="disabled"
+      @click="onClick"
+      @keydown.enter="onClick"
+    >
       <span v-if="icon" class="pr-2">{{ icon }}</span>
       <span v-if="label">{{ label }}</span>
       <slot v-else name="label" :expanded="expanded" :active="active" />