fix(Accordion): focus was changed when pressing down on element insid…

…e content (#1505)
unovue · Dec 18, 2024 · c315922 · c315922
1 parent 8240e9d
commit c315922
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/packages/radix-vue/src/Accordion/AccordionItem.vue b/packages/radix-vue/src/Accordion/AccordionItem.vue
@@ -62,11 +62,7 @@ const open = computed(() =>
 )
 
 const disabled = computed(() => {
-  return (
-    rootContext.disabled.value
-    || props.disabled
-    || (rootContext.isSingle.value && open.value && !rootContext.collapsible)
-  )
+  return (rootContext.disabled.value || props.disabled)
 })
 
 const dataDisabled = computed(() => (disabled.value ? '' : undefined))
@@ -90,6 +86,13 @@ provideAccordionItemContext({
 })
 
 function handleArrowKey(e: KeyboardEvent) {
+  const target = e.target as HTMLElement
+  const allCollectionItems: HTMLElement[] = Array.from(rootContext.parentElement.value?.querySelectorAll('[data-radix-vue-collection-item]') ?? [])
+
+  const collectionItemIndex = allCollectionItems.findIndex(item => item === target)
+  if (collectionItemIndex === -1)
+    return null
+
   useArrowNavigation(
     e,
     currentElement.value,

diff --git a/packages/radix-vue/src/Accordion/AccordionTrigger.vue b/packages/radix-vue/src/Accordion/AccordionTrigger.vue
@@ -18,8 +18,10 @@ const itemContext = injectAccordionItemContext()
 
 itemContext.triggerId ||= useId(undefined, 'radix-vue-accordion-trigger')
 function changeItem() {
-  if (itemContext.disabled.value)
+  const triggerDisabled = rootContext.isSingle.value && itemContext.open.value && !rootContext.collapsible
+  if (itemContext.disabled.value || triggerDisabled)
     return
+
   rootContext.changeModelValue(itemContext.value.value)
 }
 </script>