Ensure FocusTrap is only active when the given enabled value is true

packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx

@@ -237,7 +237,6 @@ onDocumentReady(() => {
 
 function useRestoreElement(enabled: boolean = true) {
   let localHistory = useRef<HTMLElement[]>(history.slice())
-  let isPreviouslyActive = useRef<boolean>(enabled)
 
   useWatch(
     ([newEnabled], [oldEnabled]) => {
@@ -254,21 +253,14 @@ function useRestoreElement(enabled: boolean = true) {
       if (oldEnabled === false && newEnabled === true) {
         localHistory.current = history.slice()
       }
-
-      if (oldEnabled !== undefined) {
-        isPreviouslyActive.current = oldEnabled
-      }
     },
     [enabled, history, localHistory]
   )
 
   // We want to return the last element that is still connected to the DOM, so we can restore the
   // focus to it.
   return useEvent(() => {
-    return (
-      localHistory.current.find((x) => x != null && x.isConnected && isPreviouslyActive.current) ??
-      null
-    )
+    return localHistory.current.find((x) => x != null && x.isConnected) ?? null
   })
 }
 
@@ -287,6 +279,8 @@ function useRestoreFocus({ ownerDocument }: { ownerDocument: Document | null },
   // Restore the focus to the previous element when the component is unmounted
   let trulyUnmounted = useRef(false)
   useEffect(() => {
+    if (!enabled) return
+
     trulyUnmounted.current = false
 
     return () => {
@@ -297,7 +291,7 @@ function useRestoreFocus({ ownerDocument }: { ownerDocument: Document | null },
         focusElement(getRestoreElement())
       })
     }
-  }, [])
+  }, [enabled])
 }
 
 function useInitialFocus(

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

@@ -284,6 +284,8 @@ function useRestoreFocus(
 
   // Restore the focus when we unmount the component
   onUnmounted(() => {
+    if (!enabled.value) return
+
     focusElement(getRestoreElement())
   })
 }

packages/@headlessui-vue/src/components/tabs/tabs.test.ts

@@ -1,6 +1,7 @@
 import { nextTick, ref } from 'vue'
 import { createRenderTemplate, render } from '../../test-utils/vue-testing-library'
 import { TabGroup, TabList, Tab, TabPanels, TabPanel } from './tabs'
+import { Dialog } from '../dialog/dialog'
 import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
 import {
   assertActiveElement,
@@ -20,7 +21,7 @@ beforeAll(() => {
 
 afterAll(() => jest.restoreAllMocks())
 
-const renderTemplate = createRenderTemplate({ TabGroup, TabList, Tab, TabPanels, TabPanel })
+const renderTemplate = createRenderTemplate({ TabGroup, TabList, Tab, TabPanels, TabPanel, Dialog })
 
 describe('safeguards', () => {
   it.each([
@@ -2716,3 +2717,69 @@ it('should trigger the `change` when the tab changes', async () => {
   expect(changes).toHaveBeenNthCalledWith(3, 1)
   expect(changes).toHaveBeenNthCalledWith(4, 0)
 })
+
+describe('Composition', () => {
+  it(
+    'should be possible to go to the next item containing a Dialog component',
+    suppressConsoleLogs(async () => {
+      renderTemplate({
+        template: `
+          <TabGroup>
+            <TabList>
+              <Tab>Tab 1</Tab>
+              <Tab>Tab 2</Tab>
+              <Tab>Tab 3</Tab>
+            </TabList>
+
+            <TabPanels>
+              <TabPanel data-panel="0">Content 1</TabPanel>
+              <TabPanel data-panel="1">
+                <button>open</button>
+                <Dialog :open="false" @close="noop" />
+              </TabPanel>
+              <TabPanel data-panel="2">Content 3</TabPanel>
+            </TabPanels>
+          </TabGroup>
+        `,
+        setup: () => ({
+          noop: console.log,
+        }),
+      })
+
+      await new Promise<void>(nextTick)
+
+      assertActiveElement(document.body)
+
+      await press(Keys.Tab)
+      assertTabs({ active: 0 })
+
+      // Navigate to Dialog tab
+      await press(Keys.ArrowRight)
+      assertTabs({ active: 1 })
+
+      // Focus on to the Dialog panel
+      await press(Keys.Tab)
+      assertActiveElement(document.querySelector('[data-panel="1"]'))
+
+      // Focus on to the Dialog trigger button
+      await press(Keys.Tab)
+      assertActiveElement(getByText('open'))
+
+      // Focus back to the panel
+      await press(shift(Keys.Tab))
+      assertActiveElement(document.querySelector('[data-panel="1"]'))
+
+      // Focus back to tabs
+      await press(shift(Keys.Tab))
+      assertTabs({ active: 1 })
+
+      // Navigate to the next tab
+      await press(Keys.ArrowRight)
+      assertTabs({ active: 2 })
+
+      // Focus on to the content panel
+      await press(Keys.Tab)
+      assertActiveElement(document.querySelector('[data-panel="2"]'))
+    })
+  )
+})