feat(menu): 支持子菜单自管滚动区域和焦点

src/components/dropdown-menu/DropdownMenuSubContent.vue

@@ -12,14 +12,20 @@ import MenuScrollArea from '../menu-scroll-area/MenuScrollArea.vue'
 import { useSubmenuAlignment } from '../../lib/useSubmenuAlignment'
 import { cn } from '#/lib/utils'
 
-const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
+const props = withDefaults(defineProps<DropdownMenuSubContentProps & {
+  class?: HTMLAttributes['class']
+  /** Searchable/virtualized content owns its own scroll viewport and frame. */
+  scrollable?: boolean
+}>(), { scrollable: true })
 const emits = defineEmits<DropdownMenuSubContentEmits>()
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, 'class', 'scrollable')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 const menuArea = ref<InstanceType<typeof MenuScrollArea>>()
-const currentElement = computed(() => menuArea.value?.viewportElement?.closest<HTMLElement>('[data-slot="dropdown-menu-sub-content"]') ?? undefined)
+const customBody = ref<HTMLElement>()
+const currentElement = computed(() => (menuArea.value?.viewportElement ?? customBody.value)
+  ?.closest<HTMLElement>('[data-slot="dropdown-menu-sub-content"]') ?? undefined)
 const { alignOffset, ready } = useSubmenuAlignment(currentElement)
 // Start the entrance on a fresh frame after mounting and placement have settled.
 // Otherwise a long list can consume the animation before its first visible paint.
@@ -43,9 +49,19 @@ watch(ready, (value, _, cleanup) => {
       :style="{ visibility: ready ? undefined : 'hidden' }"
       :class="cn(menuWidthClass, menuContentClass, menuAnchoredMotionClass, 'flex min-h-0 flex-col overflow-hidden max-h-(--reka-dropdown-menu-content-available-height) origin-(--reka-dropdown-menu-content-transform-origin)', props.class, !motionReady && 'animate-none! opacity-0')"
     >
-      <MenuScrollArea ref="menuArea">
+      <MenuScrollArea
+        v-if="scrollable"
+        ref="menuArea"
+      >
         <slot />
       </MenuScrollArea>
+      <div
+        v-else
+        ref="customBody"
+        class="contents"
+      >
+        <slot />
+      </div>
     </DropdownMenuSubContent>
   </DropdownMenuPortal>
 </template>

src/components/menu-scroll-area/MenuScrollArea.vue

@@ -40,7 +40,7 @@ const { fadeTop, fadeBottom } = useScrollFade(element)
           '--scroll-fade-top': fadeTop ? '16px' : '0px',
           '--scroll-fade-bottom': fadeBottom ? '16px' : '0px',
         }"
-        :tabindex="-1"
+        :tabindex="props.viewportAttrs?.tabindex ?? -1"
       >
         <div :class="props.layout === 'virtual' ? '' : cn(menuViewportClass, 'p-0')">
           <slot />

src/lib/useSubmenuAlignment.ts

@@ -11,7 +11,11 @@ export function useSubmenuAlignment(content: Readonly<Ref<HTMLElement | undefine
     const trigger = document.getElementById(element.getAttribute('aria-labelledby') ?? '')
     if (!trigger) { ready.value = true; return }
     const measure = () => {
-      const first = element.querySelector<HTMLElement>('[role^="menuitem"]')
+      // Virtual listboxes may unmount their first option while scrolling. Only
+      // anchor to logical row one, never to the first currently mounted row.
+      const first = element.querySelector<HTMLElement>(
+        '[role^="menuitem"], [role="option"][aria-posinset="1"], [role="option"]:not([aria-posinset])',
+      )
       if (first && element.offsetWidth) {
         const bounds = element.getBoundingClientRect()
         // Opening scale animation must not influence layout measurements.