From fed1551eb2963ee5accf26582e21e1fd2efce5bd Mon Sep 17 00:00:00 2001
From: Cain Hall <cain.hall98@gmail.com>
Date: Thu, 26 Sep 2024 00:52:48 +1000
Subject: [PATCH] fix: root node for RovingFocusItem when shadowRoot (#1314)

* fix: root node for RovingFocusItem when shadowRoot

* chore: replace with usePrimitveElement

---------

Co-authored-by: zernonia <zernonia@gmail.com>
Co-authored-by: sunnylost <sunnylost@users.noreply.github.com>
---
 packages/radix-vue/src/RovingFocus/RovingFocusItem.vue | 8 ++++++--
 packages/radix-vue/src/RovingFocus/utils.ts            | 4 ++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue b/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue
index 76a3dfe59..622004030 100644
--- a/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue
+++ b/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue
@@ -12,7 +12,7 @@ export interface RovingFocusItemProps extends PrimitiveProps {
 <script setup lang="ts">
 import { computed, nextTick, onMounted, onUnmounted } from 'vue'
 import { injectRovingFocusGroupContext } from './RovingFocusGroup.vue'
-import { Primitive } from '@/Primitive'
+import { Primitive, usePrimitiveElement } from '@/Primitive'
 import { focusFirst, getFocusIntent, wrapArray } from './utils'
 import { useId } from '@/shared'
 import { CollectionItem, useCollection } from '@/Collection'
@@ -31,6 +31,9 @@ const isCurrentTabStop = computed(
 
 const { getItems } = useCollection()
 
+const { primitiveElement, currentElement } = usePrimitiveElement()
+const rootNode = computed(() => currentElement.value?.getRootNode() as Document | ShadowRoot)
+
 onMounted(() => {
   if (props.focusable)
     context.onFocusableItemAdd()
@@ -76,7 +79,7 @@ function handleKeydown(event: KeyboardEvent) {
         : candidateNodes.slice(currentIndex + 1)
     }
 
-    nextTick(() => focusFirst(candidateNodes))
+    nextTick(() => focusFirst(candidateNodes, false, rootNode.value))
   }
 }
 </script>
@@ -84,6 +87,7 @@ function handleKeydown(event: KeyboardEvent) {
 <template>
   <CollectionItem>
     <Primitive
+      ref="primitiveElement"
       :tabindex="isCurrentTabStop ? 0 : -1"
       :data-orientation="context.orientation.value"
       :data-active="active"
diff --git a/packages/radix-vue/src/RovingFocus/utils.ts b/packages/radix-vue/src/RovingFocus/utils.ts
index e62b8acf3..ff80de921 100644
--- a/packages/radix-vue/src/RovingFocus/utils.ts
+++ b/packages/radix-vue/src/RovingFocus/utils.ts
@@ -40,8 +40,8 @@ export function getFocusIntent(
   return MAP_KEY_TO_FOCUS_INTENT[key]
 }
 
-export function focusFirst(candidates: HTMLElement[], preventScroll = false) {
-  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement
+export function focusFirst(candidates: HTMLElement[], preventScroll = false, rootNode?: Document | ShadowRoot) {
+  const PREVIOUSLY_FOCUSED_ELEMENT = rootNode?.activeElement ?? document.activeElement
   for (const candidate of candidates) {
     // if focus is already where we want to go, we don't want to keep going through the candidates
     if (candidate === PREVIOUSLY_FOCUSED_ELEMENT)