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

@@ -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,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="primitiveElement"
  :tabindex="isCurrentTabStop ? 0 : -1"
  :data-orientation="context.orientation.value"
  :data-active="active"

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)