diff --git a/CHANGELOG.md b/CHANGELOG.md
index 296b954b1c..b804164bd0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Only add `type=button` to real buttons ([#709](https://github.com/tailwindlabs/headlessui/pull/709))
- Fix `escape` bug not closing Dialog after clicking in Dialog ([#754](https://github.com/tailwindlabs/headlessui/pull/754))
+- Use `console.warn` instead of throwing an error when there are no focusable elements ([#775](https://github.com/tailwindlabs/headlessui/pull/775))
## [Unreleased - Vue]
@@ -19,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Only add `type=button` to real buttons ([#709](https://github.com/tailwindlabs/headlessui/pull/709))
- Add Vue emit types ([#679](https://github.com/tailwindlabs/headlessui/pull/679), [#712](https://github.com/tailwindlabs/headlessui/pull/712))
- Fix `escape` bug not closing Dialog after clicking in Dialog ([#754](https://github.com/tailwindlabs/headlessui/pull/754))
+- Use `console.warn` instead of throwing an error when there are no focusable elements ([#775](https://github.com/tailwindlabs/headlessui/pull/775))
## [@headlessui/react@v1.4.0] - 2021-07-29
diff --git a/packages/@headlessui-react/src/components/focus-trap/focus-trap.test.tsx b/packages/@headlessui-react/src/components/focus-trap/focus-trap.test.tsx
index f0de0f330b..58c2c523b0 100644
--- a/packages/@headlessui-react/src/components/focus-trap/focus-trap.test.tsx
+++ b/packages/@headlessui-react/src/components/focus-trap/focus-trap.test.tsx
@@ -62,20 +62,19 @@ it('should focus the initialFocus element inside the FocusTrap even if another e
assertActiveElement(document.getElementById('c'))
})
-it(
- 'should error when there is no focusable element inside the FocusTrap',
- suppressConsoleLogs(() => {
- expect(() => {
- render(
-
- Nothing to see here...
-
- )
- }).toThrowErrorMatchingInlineSnapshot(
- `"There are no focusable elements inside the "`
+it('should warn when there is no focusable element inside the FocusTrap', () => {
+ let spy = jest.spyOn(console, 'warn').mockImplementation(jest.fn())
+
+ function Example() {
+ return (
+
+ Nothing to see here...
+
)
- })
-)
+ }
+ render()
+ expect(spy.mock.calls[0][0]).toBe('There are no focusable elements inside the ')
+})
it(
'should not be possible to programmatically escape the focus trap',
diff --git a/packages/@headlessui-react/src/hooks/use-focus-trap.ts b/packages/@headlessui-react/src/hooks/use-focus-trap.ts
index 2b7eb905cc..68b4c282ac 100644
--- a/packages/@headlessui-react/src/hooks/use-focus-trap.ts
+++ b/packages/@headlessui-react/src/hooks/use-focus-trap.ts
@@ -89,7 +89,7 @@ export function useFocusTrap(
focusElement(initialFocus.current)
} else {
if (focusIn(container.current, Focus.First) === FocusResult.Error) {
- throw new Error('There are no focusable elements inside the ')
+ console.warn('There are no focusable elements inside the ')
}
}
diff --git a/packages/@headlessui-vue/src/components/focus-trap/focus-trap.test.ts b/packages/@headlessui-vue/src/components/focus-trap/focus-trap.test.ts
index ee70eedf46..8243a82ff4 100644
--- a/packages/@headlessui-vue/src/components/focus-trap/focus-trap.test.ts
+++ b/packages/@headlessui-vue/src/components/focus-trap/focus-trap.test.ts
@@ -109,28 +109,22 @@ it('should focus the initialFocus element inside the FocusTrap even if another e
assertActiveElement(document.getElementById('c'))
})
-it(
- 'should error when there is no focusable element inside the FocusTrap',
- suppressConsoleLogs(async () => {
- expect.assertions(1)
+it('should warn when there is no focusable element inside the FocusTrap', async () => {
+ expect.assertions(1)
+ let spy = jest.spyOn(console, 'warn').mockImplementation(jest.fn())
- renderTemplate({
- template: html`
-
- Nothing to see here...
-
- `,
- errorCaptured(err: unknown) {
- expect((err as Error).message).toMatchInlineSnapshot(
- `"There are no focusable elements inside the "`
- )
- return false
- },
- })
+ renderTemplate(
+ html`
+
+ Nothing to see here...
+
+ `
+ )
- await new Promise(nextTick)
- })
-)
+ await new Promise(nextTick)
+
+ expect(spy.mock.calls[0][0]).toBe('There are no focusable elements inside the ')
+})
it(
'should not be possible to programmatically escape the focus trap',
diff --git a/packages/@headlessui-vue/src/hooks/use-focus-trap.ts b/packages/@headlessui-vue/src/hooks/use-focus-trap.ts
index 3236a14b69..e5a070e721 100644
--- a/packages/@headlessui-vue/src/hooks/use-focus-trap.ts
+++ b/packages/@headlessui-vue/src/hooks/use-focus-trap.ts
@@ -53,7 +53,7 @@ export function useFocusTrap(
}
}
- if (!couldFocus) throw new Error('There are no focusable elements inside the ')
+ if (!couldFocus) console.warn('There are no focusable elements inside the ')
}
previousActiveElement.value = document.activeElement as HTMLElement