feat(useFocusTrap): expose updateContainerElements for dynamic contai…

…ner updates
vueuse · antfu · Jul 28, 2025 · Jun 30, 2025 · Jul 4, 2025 · Jul 18, 2025
commit 07c58f7c61957cc2071bcbc281ec2618f414ee9e
diff --git a/packages/integrations/useFocusTrap/demo.vue b/packages/integrations/useFocusTrap/demo.vue
@@ -3,7 +3,16 @@ import { useFocusTrap } from '@vueuse/integrations'
 import { useTemplateRef } from 'vue'
 
 const target = useTemplateRef<HTMLElement>('target')
-const { hasFocus, activate, deactivate } = useFocusTrap(target)
+const target2 = useTemplateRef<HTMLElement>('target2')
+const { hasFocus, activate, deactivate, updateContainerElements } = useFocusTrap(target)
+
+function focusTopForm() {
+  updateContainerElements(target.value!)
+}
+
+function focusBottomForm() {
+  updateContainerElements(target2.value!)
+}
 </script>
 
 <template>
@@ -31,6 +40,29 @@ const { hasFocus, activate, deactivate } = useFocusTrap(target)
         <button @click="deactivate()">
           Free Focus
         </button>
+        <button @click="focusBottomForm">
+          Focus Bottom Form
+        </button>
+      </div>
+    </div>
+
+    <div
+      ref="target2"
+      class="shadow-lg bg-green-100 rounded max-w-96 mx-auto p-8"
+    >
+      <h3 class="text-center mb-4">
+        Container 2
+      </h3>
+      <input type="text" placeholder="First Name" class="block w-full mb-2">
+      <input type="text" placeholder="Last Name" class="block w-full mb-2">
+      <textarea placeholder="Comments" class="block w-full mb-4" />
+      <div class="flex gap-2 justify-center">
+        <button @click="deactivate()">
+          Free Focus
+        </button>
+        <button @click="focusTopForm">
+          Focus Top Form
+        </button>
       </div>
     </div>
   </div>

diff --git a/packages/integrations/useFocusTrap/index.ts b/packages/integrations/useFocusTrap/index.ts
@@ -6,6 +6,7 @@ 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
@@ -53,6 +54,13 @@ 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
 }
 
 /**
@@ -87,6 +95,13 @@ export function useFocusTrap(
     }
   }
 
+  const updateContainerElements = (el: ContainerElements) => {
+    if (trap) {
+      trap.updateContainerElements(el)
+      return trap
+    }
+  }
+
   const targets = computed(() => {
     const _targets = toValue(target)
     return toArray(_targets)
@@ -138,5 +153,6 @@ export function useFocusTrap(
     deactivate,
     pause,
     unpause,
+    updateContainerElements,
   }
 }