Warn instead of error when there are no focusable elements (#775)

* warn instead of error when there are no focusable elements

* update changelog

Co-authored-by: Krystof Rehacek <[email protected]>

Author: RobinMalfait

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
 

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(
-        <FocusTrap>
-          <span>Nothing to see here...</span>
-        </FocusTrap>
-      )
-    }).toThrowErrorMatchingInlineSnapshot(
-      `"There are no focusable elements inside the <FocusTrap />"`
+it('should warn when there is no focusable element inside the FocusTrap', () => {
+  let spy = jest.spyOn(console, 'warn').mockImplementation(jest.fn())
+
+  function Example() {
+    return (
+      <FocusTrap>
+        <span>Nothing to see here...</span>
+      </FocusTrap>
     )
-  })
-)
+  }
+  render(<Example />)
+  expect(spy.mock.calls[0][0]).toBe('There are no focusable elements inside the <FocusTrap />')
+})
 
 it(
   'should not be possible to programmatically escape the focus trap',

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 <FocusTrap />')
+        console.warn('There are no focusable elements inside the <FocusTrap />')
       }
     }
 

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`
-        <FocusTrap>
-          <span>Nothing to see here...</span>
-        </FocusTrap>
-      `,
-      errorCaptured(err: unknown) {
-        expect((err as Error).message).toMatchInlineSnapshot(
-          `"There are no focusable elements inside the <FocusTrap />"`
-        )
-        return false
-      },
-    })
+  renderTemplate(
+    html`
+      <FocusTrap>
+        <span>Nothing to see here...</span>
+      </FocusTrap>
+    `
+  )
 
-    await new Promise(nextTick)
-  })
-)
+  await new Promise(nextTick)
+
+  expect(spy.mock.calls[0][0]).toBe('There are no focusable elements inside the <FocusTrap />')
+})
 
 it(
   'should not be possible to programmatically escape the focus trap',

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 <FocusTrap />')
+      if (!couldFocus) console.warn('There are no focusable elements inside the <FocusTrap />')
     }
 
     previousActiveElement.value = document.activeElement as HTMLElement