fix: root node for RovingFocusItem when shadowRoot

unovue · Sep 23, 2024 · f62a469 · f62a469
1 parent 30a40a3
commit f62a469
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue b/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue
@@ -10,7 +10,7 @@ export interface RovingFocusItemProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, onUnmounted } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
 import { injectRovingFocusGroupContext } from './RovingFocusGroup.vue'
 import { Primitive } from '@/Primitive'
 import { focusFirst, getFocusIntent, wrapArray } from './utils'
@@ -31,6 +31,9 @@ const isCurrentTabStop = computed(
 
 const { getItems } = useCollection()
 
+const elRef = ref()
+const rootNode = computed<Document | ShadowRoot>(() => elRef.value?.$el.getRootNode())
+
 onMounted(() => {
   if (props.focusable)
     context.onFocusableItemAdd()
@@ -76,14 +79,15 @@ function handleKeydown(event: KeyboardEvent) {
         : candidateNodes.slice(currentIndex + 1)
     }
 
-    nextTick(() => focusFirst(candidateNodes))
+    nextTick(() => focusFirst(candidateNodes, false, rootNode.value))
   }
 }
 </script>
 
 <template>
   <CollectionItem>
     <Primitive
+      ref="elRef"
       :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
@@ -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)