Ensure hooks in the FocusTrap component only apply when mounted (#2331

)

* ensure hooks in the `FocusTrap` component only apply when mounted

* update changelog

packages/@headlessui-vue/CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Allow root containers from the `Dialog` component in the `FocusTrap` component ([#2322](https://github.com/tailwindlabs/headlessui/pull/2322))
 - Cleanup internal TypeScript types ([#2329](https://github.com/tailwindlabs/headlessui/pull/2329))
 - Fix restore focus to buttons in Safari, when `Dialog` component closes ([#2326](https://github.com/tailwindlabs/headlessui/pull/2326))
+- Ensure hooks in the `FocusTrap` component only apply when mounted ([#2331](https://github.com/tailwindlabs/headlessui/pull/2331))
 
 ## [1.7.11] - 2023-02-24
 

packages/@headlessui-vue/src/components/focus-trap/focus-trap.ts

@@ -84,13 +84,17 @@ export let FocusTrap = Object.assign(
 
       let ownerDocument = computed(() => getOwnerDocument(container))
 
+      let mounted = ref(false)
+      onMounted(() => (mounted.value = true))
+      onUnmounted(() => (mounted.value = false))
+
       useRestoreFocus(
         { ownerDocument },
-        computed(() => Boolean(props.features & Features.RestoreFocus))
+        computed(() => mounted.value && Boolean(props.features & Features.RestoreFocus))
       )
       let previousActiveElement = useInitialFocus(
         { ownerDocument, container, initialFocus: computed(() => props.initialFocus) },
-        computed(() => Boolean(props.features & Features.InitialFocus))
+        computed(() => mounted.value && Boolean(props.features & Features.InitialFocus))
       )
       useFocusLock(
         {
@@ -99,7 +103,7 @@ export let FocusTrap = Object.assign(
           containers: props.containers,
           previousActiveElement,
         },
-        computed(() => Boolean(props.features & Features.FocusLock))
+        computed(() => mounted.value && Boolean(props.features & Features.FocusLock))
       )
 
       let direction = useTabDirection()
@@ -132,6 +136,7 @@ export let FocusTrap = Object.assign(
       }
 
       function handleBlur(e: FocusEvent) {
+        if (!mounted.value) return
         let allContainers = resolveContainers(props.containers)
         if (dom(container) instanceof HTMLElement) allContainers.add(dom(container)!)