fix(Menu): first item wasn't highlighted when open menu using keyboard

unovue · Jul 11, 2024 · 3270255 · 3270255
1 parent 0dfaeec
commit 3270255
Showing 1 changed file with 39 additions and 28 deletions.
diff --git a/packages/radix-vue/src/Menu/MenuItemImpl.vue b/packages/radix-vue/src/Menu/MenuItemImpl.vue
@@ -19,10 +19,17 @@ import { injectMenuContentContext } from './MenuContentImpl.vue'
 import {
   Primitive,
 } from '@/Primitive'
+import { CollectionItem } from '@/Collection'
+import { useForwardExpose } from '@/shared'
+
+defineOptions({
+  inheritAttrs: false,
+})
 
 const props = defineProps<MenuItemImplProps>()
 
 const contentContext = injectMenuContentContext()
+const { forwardRef } = useForwardExpose()
 
 const isFocused = ref(false)
 
@@ -56,32 +63,36 @@ async function handlePointerLeave(event: PointerEvent) {
 </script>
 
 <template>
-  <Primitive
-    role="menuitem"
-    tabindex="-1"
-    :as="as"
-    :as-child="asChild"
-    data-radix-vue-collection-item
-    :aria-disabled="disabled || undefined"
-    :data-disabled="disabled ? '' : undefined"
-    :data-highlighted="isFocused ? '' : undefined"
-    @pointermove="handlePointerMove"
-    @pointerleave="handlePointerLeave"
-    @focus="
-      async (event) => {
-        await nextTick();
-        if (event.defaultPrevented || disabled) return;
-        isFocused = true;
-      }
-    "
-    @blur="
-      async (event) => {
-        await nextTick();
-        if (event.defaultPrevented) return;
-        isFocused = false;
-      }
-    "
-  >
-    <slot />
-  </Primitive>
+  <CollectionItem>
+    <Primitive
+      :ref="forwardRef"
+      role="menuitem"
+      tabindex="-1"
+      v-bind="$attrs"
+      :as="as"
+      :as-child="asChild"
+      data-radix-vue-collection-item
+      :aria-disabled="disabled || undefined"
+      :data-disabled="disabled ? '' : undefined"
+      :data-highlighted="isFocused ? '' : undefined"
+      @pointermove="handlePointerMove"
+      @pointerleave="handlePointerLeave"
+      @focus="
+        async (event) => {
+          await nextTick();
+          if (event.defaultPrevented || disabled) return;
+          isFocused = true;
+        }
+      "
+      @blur="
+        async (event) => {
+          await nextTick();
+          if (event.defaultPrevented) return;
+          isFocused = false;
+        }
+      "
+    >
+      <slot />
+    </Primitive>
+  </CollectionItem>
 </template>