Deactivate focus trap on click outside (#1717)

* Deactivate focus trap on click outside
* Disable storyshots

Author: mdodgelooker

packages/components-providers/src/FocusTrap/utils.ts

@@ -105,6 +105,16 @@ export const activateFocusTrap = (container: HTMLElement) => {
       node.select()
     }
   }
+
+  // This needs to be done on mousedown and touchstart instead of click
+  // so that it precedes the focus event.
+  const checkPointerDown = function (e: MouseEvent | TouchEvent) {
+    if (!container.contains(e.target as Node)) {
+      // immediately deactivate the trap
+      deactivate()
+    }
+  }
+
   // In case focus escapes the trap for some strange reason, pull it back in.
   const checkFocusIn = (e: FocusEvent) => {
     // In Firefox when you Tab out of an iframe the Document is briefly focused.
@@ -135,6 +145,14 @@ export const activateFocusTrap = (container: HTMLElement) => {
   }
 
   document.addEventListener('focusin', checkFocusIn, true)
+  document.addEventListener('mousedown', checkPointerDown, {
+    capture: true,
+    passive: false,
+  })
+  document.addEventListener('touchstart', checkPointerDown, {
+    capture: true,
+    passive: false,
+  })
   document.addEventListener('keydown', checkKey, {
     capture: true,
     passive: false,
@@ -145,9 +163,11 @@ export const activateFocusTrap = (container: HTMLElement) => {
   }, 0)
 
   // Deactivate function
-  return () => {
+  const deactivate = () => {
     clearTimeout(t)
     document.removeEventListener('focusin', checkFocusIn, true)
+    document.removeEventListener('mousedown', checkPointerDown, true)
+    document.removeEventListener('touchstart', checkPointerDown, true)
     document.removeEventListener('keydown', checkKey, true)
 
     // If focus lands on the body, move it back to where it was before the trap
@@ -161,4 +181,5 @@ export const activateFocusTrap = (container: HTMLElement) => {
       elementToFocus.removeAttribute('data-notooltip')
     }
   }
+  return deactivate
 }

packages/components/CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.9.29]
+
+### Fixed
+
+- Clicking outside a focus trap deactivates it
+
 ## [0.9.28]
 
 ### Removed

packages/components/src/Dialog/stories/Dialog.story.tsx

@@ -108,6 +108,36 @@ withCheckbox.parameters = {
   storyshots: { disable: true },
 }
 
+export const ClickOutside = () => {
+  return (
+    <>
+      <input
+        type="text"
+        style={{
+          position: 'absolute',
+          right: '0',
+          top: '0',
+          zIndex: 100,
+        }}
+      />
+      <Dialog
+        content={
+          <>
+            <button>button 1</button>
+            <button>button 2</button>
+          </>
+        }
+      >
+        <button>Open Dialog</button>
+      </Dialog>
+    </>
+  )
+}
+
+ClickOutside.arguments = {
+  storyshots: { disable: true },
+}
+
 export default {
   argTypes: {
     placement: {