fix(Menu): subContent flickers, item disabled was selected (#648)

radix-vue · Feb 1, 2024 · a0b07de · a0b07de
1 parent 95ef82a
commit a0b07de
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 14 deletions.
diff --git a/packages/radix-vue/src/DropdownMenu/story/DropdownMenu.story.vue b/packages/radix-vue/src/DropdownMenu/story/DropdownMenu.story.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import { ref, watch } from 'vue'
+import { ref } from 'vue'
 import {
   DropdownMenuArrow,
   DropdownMenuCheckboxItem,
@@ -33,12 +33,6 @@ function handleCheck(ev: any) {
   // checkboxOne.value = ev;
   console.log(ev)
 }
-
-const el = ref<InstanceType<typeof DropdownMenuItem>>()
-
-watch(el, () => {
-  console.log(el.value)
-}, { immediate: true, deep: true })
 </script>
 
 <template>
@@ -58,7 +52,6 @@ watch(el, () => {
             class="min-w-[220px] bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
           >
             <DropdownMenuItem
-              ref="el"
               value="New Tab"
               class="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
               @click="handleClick"

diff --git a/packages/radix-vue/src/Menu/MenuContentImpl.vue b/packages/radix-vue/src/Menu/MenuContentImpl.vue
@@ -174,6 +174,7 @@ function handleKeyDown(event: KeyboardEvent) {
       arrowKeyOptions: 'vertical',
       dir: rootContext?.dir.value,
       focus: true,
+      attributeName: '[data-radix-vue-collection-item]:not([data-disabled])',
     },
   )
   if (el)

diff --git a/packages/radix-vue/src/Menu/MenuSubTrigger.vue b/packages/radix-vue/src/Menu/MenuSubTrigger.vue
@@ -6,7 +6,7 @@ export interface MenuSubTriggerProps extends MenuItemImplProps {}
 </script>
 
 <script setup lang="ts">
-import { nextTick, onUnmounted, ref } from 'vue'
+import { type ComponentPublicInstance, nextTick, onUnmounted, ref } from 'vue'
 import MenuItemImpl from './MenuItemImpl.vue'
 import { injectMenuContext, injectMenuRootContext } from './MenuRoot.vue'
 import { injectMenuSubContext } from './MenuSub.vue'
@@ -117,9 +117,10 @@ async function handleKeyDown(event: KeyboardEvent) {
       v-bind="props"
       :id="subContext.triggerId"
       :ref="
-        (vnode) => {
+        (vnode: ComponentPublicInstance) => {
           // @ts-ignore
-          subContext?.onTriggerChange(vnode?.el);
+          subContext?.onTriggerChange(vnode?.$el);
+          return undefined
         }
       "
       aria-haspopup="menu"

diff --git a/packages/radix-vue/src/shared/useArrowNavigation.ts b/packages/radix-vue/src/shared/useArrowNavigation.ts
@@ -84,7 +84,7 @@ export function useArrowNavigation(
 
   const {
     arrowKeyOptions = 'both',
-    attributeName = 'data-radix-vue-collection-item',
+    attributeName = '[data-radix-vue-collection-item]',
     itemsArray = [],
     loop = true,
     dir = 'ltr',
@@ -112,7 +112,7 @@ export function useArrowNavigation(
     return null
 
   const allCollectionItems: HTMLElement[] = parentElement
-    ? Array.from(parentElement.querySelectorAll(`[${attributeName}]`))
+    ? Array.from(parentElement.querySelectorAll(attributeName))
     : itemsArray
 
   if (!allCollectionItems.length)

diff --git a/packages/radix-vue/src/shared/useCollection.ts b/packages/radix-vue/src/shared/useCollection.ts
@@ -31,7 +31,7 @@ export function useCollection(key?: string, name = ITEM_DATA_ATTR) {
         return (items.value = [])
 
       return (items.value = Array.from(
-        sourceEl.querySelectorAll(`[${name}]:not([data-disabled=true])`),
+        sourceEl.querySelectorAll(`[${name}]:not([data-disabled])`),
       ) as HTMLElement[])
     }