feat(useFocusTrap): expose updateContainerElements for dynamic contai… (#4849)

PeikyLiu · ilyaliao · autofix-ci[bot] · web-flow · commit 3d5e511a8f98 · 2025-07-28T04:28:09.000Z
Co-authored-by: IlyaL &lt;ilyaliao324@gmail.com&gt;
Co-authored-by: autofix-ci[bot] &lt;114827586+autofix-ci[bot]@users.noreply.github.com&gt;
diff --git a/packages/integrations/useFocusTrap/index.md b/packages/integrations/useFocusTrap/index.md
@@ -76,6 +76,40 @@ const { hasFocus, activate, deactivate } = useFocusTrap([targetOne, targetTwo])
 </template>
 ```
 
+**Dynamic Focus Target**
+
+```vue
+<script setup lang="ts">
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
+import { computed, shallowRef, useTemplateRef } from 'vue'
+
+const left = useTemplateRef('left')
+const right = useTemplateRef('right')
+const currentRef = shallowRef<'left' | 'right'>('left')
+
+const target = computed(() =>
+  currentRef.value === 'left'
+    ? left
+    : currentRef.value === 'right'
+      ? right
+      : null,
+)
+
+const { activate } = useFocusTrap(target)
+</script>
+
+<template>
+  <div>
+    <div ref="left" class="left">
+      ...
+    </div>
+    <div ref="right" class="right">
+      ...
+    </div>
+  </div>
+</template>
+```
+
 **Automatically Focus**
 
 ```vue
diff --git a/packages/integrations/useFocusTrap/index.ts b/packages/integrations/useFocusTrap/index.ts
@@ -61,7 +61,7 @@ export interface UseFocusTrapReturn {
  * @see https://vueuse.org/useFocusTrap
  */
 export function useFocusTrap(
-  target: Arrayable<MaybeRefOrGetter<string> | MaybeComputedElementRef>,
+  target: MaybeRefOrGetter<Arrayable<MaybeRefOrGetter<string> | MaybeComputedElementRef>>,
   options: UseFocusTrapOptions = {},
 ): UseFocusTrapReturn {
   let trap: undefined | FocusTrap
@@ -102,28 +102,42 @@ export function useFocusTrap(
     (els) => {
       if (!els.length)
         return
-
-      trap = createFocusTrap(els, {
-        ...focusTrapOptions,
-        onActivate() {
-          hasFocus.value = true
-
-          // Apply if user provided onActivate option
-          if (options.onActivate)
-            options.onActivate()
-        },
-        onDeactivate() {
-          hasFocus.value = false
-
-          // Apply if user provided onDeactivate option
-          if (options.onDeactivate)
-            options.onDeactivate()
-        },
-      })
-
-      // Focus if immediate is set to true
-      if (immediate)
-        activate()
+      if (!trap) {
+        // create the trap
+        trap = createFocusTrap(els, {
+          ...focusTrapOptions,
+          onActivate() {
+            hasFocus.value = true
+
+            // Apply if user provided onActivate option
+            if (options.onActivate)
+              options.onActivate()
+          },
+          onDeactivate() {
+            hasFocus.value = false
+
+            // Apply if user provided onDeactivate option
+            if (options.onDeactivate)
+              options.onDeactivate()
+          },
+        })
+
+        // Focus if immediate is set to true
+        if (immediate)
+          activate()
+      }
+      else {
+        // get the active state of the trap
+        const isActive = trap?.active
+
+        // update the container elements
+        trap?.updateContainerElements(els)
+
+        // if the trap is not active and immediate is set to true, activate the trap
+        if (!isActive && immediate) {
+          activate()
+        }
+      }
     },
     { flush: 'post' },
   )
