Fix Dialog usage in Tabs (#1149)

* only record the restoreElement once enabled

Currently we are collecting the `restoreElement` even if the focus trap
is not enabled. When we unmount we try to restore it.

The problem is the moment you unmount you want to restore but only if
the focus trap was enabled.

Another issue is that the dialog state will be `closed` before we get to
the `onUmount` hook. So there is probably a cleaner way to fix this, but
this does the trick as well where we only record the restoreElement the
moment the focus trap gets enabled.

* update changelog

Author: RobinMalfait

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Make sure that the input syncs when the combobox closes ([#1137](https://github.com/tailwindlabs/headlessui/pull/1137))
 - Ensure that you can close the combobox initially ([#1148](https://github.com/tailwindlabs/headlessui/pull/1148))
+- Fix Dialog usage in Tabs ([#1149](https://github.com/tailwindlabs/headlessui/pull/1149))
 
 ## [@headlessui/react@v1.5.0] - 2022-02-17
 

packages/@headlessui-vue/src/hooks/use-focus-trap.ts

@@ -18,9 +18,7 @@ export function useFocusTrap(
   enabled: Ref<boolean> = ref(true),
   options: Ref<{ initialFocus?: HTMLElement | null }> = ref({})
 ) {
-  let restoreElement = ref<HTMLElement | null>(
-    typeof window !== 'undefined' ? (document.activeElement as HTMLElement) : null
-  )
+  let restoreElement = ref<HTMLElement | null>(null)
   let previousActiveElement = ref<HTMLElement | null>(null)
 
   function handleFocus() {