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]>
tailwindlabs · Aug 30, 2021 · 3f14839 · 3f14839
1 parent b59c091
commit 3f14839
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 35 deletions.
diff --git 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
@@ -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',

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

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
@@ -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',

diff --git 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 <FocusTrap />')
+      if (!couldFocus) console.warn('There are no focusable elements inside the <FocusTrap />')
     }
 
     previousActiveElement.value = document.activeElement as HTMLElement
-Original file line number
+Diff line change
@@ Expand Up / @@ -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
@@ Expand Down @@