feat: call updateContainerElements when target has changes

vueuse · antfu · Jul 28, 2025 · Jun 30, 2025 · Jul 4, 2025 · Jul 18, 2025
commit be349a201fbceef1ea3b9f498d3398cbeb9779d2
diff --git a/packages/integrations/useFocusTrap/demo.vue b/packages/integrations/useFocusTrap/demo.vue
@@ -1,17 +1,19 @@
 <script setup lang="ts">
 import { useFocusTrap } from '@vueuse/integrations'
-import { useTemplateRef } from 'vue'
+import { shallowRef, useTemplateRef } from 'vue'
 
 const target = useTemplateRef<HTMLElement>('target')
 const target2 = useTemplateRef<HTMLElement>('target2')
-const { hasFocus, activate, deactivate, updateContainerElements } = useFocusTrap(target)
+const targets = shallowRef<HTMLElement | null>(null)
+
+const { hasFocus, activate, deactivate } = useFocusTrap(targets)
 
 function focusTopForm() {
-  updateContainerElements(target.value!)
+  targets.value = target.value
 }
 
 function focusBottomForm() {
-  updateContainerElements(target2.value!)
+  targets.value = target2.value
 }
 </script>
 

diff --git a/packages/integrations/useFocusTrap/index.ts b/packages/integrations/useFocusTrap/index.ts
@@ -6,7 +6,6 @@ import { notNullish } from '@vueuse/shared'
 import { createFocusTrap } from 'focus-trap'
 import { computed, shallowRef, toValue, watch } from 'vue'
 
-type ContainerElements = Parameters<FocusTrap['updateContainerElements']>[0]
 export interface UseFocusTrapOptions extends Options {
   /**
    * Immediately activate the trap
@@ -54,13 +53,6 @@ export interface UseFocusTrapReturn {
    * @see https://github.com/focus-trap/focus-trap#trapunpause
    */
   unpause: Fn
-
-  /**
-   * Update the container elements
-   *
-   * @see https://github.com/focus-trap/focus-trap?tab=readme-ov-file#trapupdatecontainerelements
-   */
-  updateContainerElements: (el: ContainerElements) => FocusTrap | undefined
 }
 
 /**
@@ -69,15 +61,14 @@ 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
-
   const { immediate, ...focusTrapOptions } = options
   const hasFocus = shallowRef(false)
   const isPaused = shallowRef(false)
-
+  let initial = true
   const activate = (opts?: ActivateOptions) => trap && trap.activate(opts)
   const deactivate = (opts?: DeactivateOptions) => trap && trap.deactivate(opts)
 
@@ -94,51 +85,57 @@ export function useFocusTrap(
       isPaused.value = false
     }
   }
-
-  const updateContainerElements = (el: ContainerElements) => {
-    if (trap) {
-      trap.updateContainerElements(el)
-      return trap
-    }
-  }
-
   const targets = computed(() => {
     const _targets = toValue(target)
+
     return toArray(_targets)
       .map((el) => {
         const _el = toValue(el)
         return typeof _el === 'string' ? _el : unrefElement(_el)
       })
       .filter(notNullish)
   })
-
   watch(
     targets,
     (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 (initial) {
+        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()
+        }
+
+        initial = false
+      }
+      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' },
   )
@@ -153,6 +150,5 @@ export function useFocusTrap(
     deactivate,
     pause,
     unpause,
-    updateContainerElements,
   }
 }