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

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

@@ -93,6 +93,7 @@ function FocusTrapFn<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG>(
     { ownerDocument, container, initialFocus },
     Boolean(features & Features.InitialFocus)
   )
+
   useFocusLock(
     { ownerDocument, container, containers, previousActiveElement },
     Boolean(features & Features.FocusLock)
@@ -278,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 () => {
@@ -288,7 +291,7 @@ function useRestoreFocus({ ownerDocument }: { ownerDocument: Document | null },
         focusElement(getRestoreElement())
       })
     }
-  }, [])
+  }, [enabled])
 }
 
 function useInitialFocus(

packages/@headlessui-react/src/components/tabs/tabs.test.tsx

@@ -2,6 +2,7 @@ import React, { createElement, useState } from 'react'
 import { render } from '@testing-library/react'
 
 import { Tab } from './tabs'
+import { Dialog } from '../dialog/dialog'
 import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
 import {
   assertTabs,
@@ -2881,6 +2882,69 @@ describe('Mouse interactions', () => {
   )
 })
 
+describe('Composition', () => {
+  it(
+    'should be possible to go to the next item containing a Dialog component',
+    suppressConsoleLogs(async () => {
+      render(
+        <>
+          <Tab.Group>
+            <Tab.List>
+              <Tab>Tab 1</Tab>
+              <Tab>Tab 2</Tab>
+              <Tab>Tab 3</Tab>
+            </Tab.List>
+
+            <Tab.Panels>
+              <Tab.Panel data-panel="0">Content 1</Tab.Panel>
+              <Tab.Panel data-panel="1">
+                <>
+                  <button>open</button>
+                  <Dialog open={false} onClose={console.log} />
+                </>
+              </Tab.Panel>
+              <Tab.Panel data-panel="2">Content 3</Tab.Panel>
+            </Tab.Panels>
+          </Tab.Group>
+        </>
+      )
+
+      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"]'))
+    })
+  )
+})
+
 it(
   'should trigger the `onChange` when the tab changes',
   suppressConsoleLogs(async () => {

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"]'))
+    })
+  )
+})