fix: allow focus to move from overlay on mousedown (#1244)

.changeset/nine-boxes-change.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Allow focus to move to an input outside an overlay on mousedown

src/__tests__/ActionMenu.tsx

@@ -104,7 +104,7 @@ describe('ActionMenu', () => {
     expect(portalRoot).toBeTruthy()
     const somethingElse = (await menu.baseElement.querySelector('#something-else')) as HTMLElement
     act(() => {
-      fireEvent.click(somethingElse)
+      fireEvent.mouseDown(somethingElse)
     })
     expect(portalRoot?.textContent).toEqual('') // menu items are hidden
   })

src/__tests__/AnchoredOverlay.tsx

@@ -110,7 +110,7 @@ describe('AnchoredOverlay', () => {
         onCloseCallback={mockCloseCallback}
       />
     )
-    fireEvent.click(anchoredOverlay.baseElement)
+    fireEvent.mouseDown(anchoredOverlay.baseElement)
 
     expect(mockOpenCallback).toHaveBeenCalledTimes(0)
     expect(mockCloseCallback).toHaveBeenCalledTimes(1)

src/__tests__/DropdownMenu.tsx

@@ -124,7 +124,7 @@ describe('DropdownMenu', () => {
     expect(portalRoot).toBeTruthy()
     const somethingElse = (await menu.baseElement.querySelector('#something-else')) as HTMLElement
     act(() => {
-      fireEvent.click(somethingElse)
+      fireEvent.mouseDown(somethingElse)
     })
     // portal is closed after click
     expect(portalRoot?.textContent).toEqual('') // menu items are hidden

src/behaviors/focusTrap.ts

@@ -142,11 +142,12 @@ export function focusTrap(
 
   // Prevent focus leaving the trap container
   document.addEventListener(
-    'focusin',
-    (event: FocusEvent) => {
+    'focus',
+    event => {
       ensureTrapZoneHasFocus(event.target)
     },
-    {signal: wrappingController.signal}
+    // use capture to ensure we get all events.  focus events do not bubble
+    {signal: wrappingController.signal, capture: true}
   )
 
   // focus the first element

src/hooks/useOnOutsideClick.tsx

@@ -49,9 +49,10 @@ export const useOnOutsideClick = ({containerRef, ignoreClickRefs, onClickOutside
   )
 
   useEffect(() => {
-    document.addEventListener('click', onOutsideClickInternal)
+    // use capture to ensure we get all events
+    document.addEventListener('mousedown', onOutsideClickInternal, {capture: true})
     return () => {
-      document.removeEventListener('click', onOutsideClickInternal)
+      document.removeEventListener('mousedown', onOutsideClickInternal, {capture: true})
     }
   }, [onOutsideClickInternal])
 }

src/stories/DropdownMenu.stories.tsx

@@ -4,6 +4,7 @@ import {theme, ThemeProvider} from '..'
 import {ItemInput} from '../ActionList/List'
 import BaseStyles from '../BaseStyles'
 import {DropdownMenu, DropdownButton} from '../DropdownMenu'
+import TextInput from '../TextInput'
 
 const meta: Meta = {
   title: 'Composite components/DropdownMenu',
@@ -34,6 +35,7 @@ export function FavoriteColorStory(): JSX.Element {
   return (
     <>
       <h1>Favorite Color</h1>
+      <TextInput placeholder="Input for focus testing" mb={2} />
       <div id="favorite-color-label">Please select your favorite color:</div>
       <DropdownMenu
         renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (