Dialog Focus Fix (#1235)

Author: VanAnderson

.changeset/tasty-mangos-think.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Dialog properly auto-focuses cancel button by default when originating from a FocusZone/FocusTrap.

src/Dialog/Dialog.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useRef} from 'react'
+import React, {useCallback, useEffect, useRef, useState} from 'react'
 import styled from 'styled-components'
 import Button, {ButtonPrimary, ButtonDanger, ButtonProps} from '../Button'
 import Flex from '../Flex'
@@ -341,11 +341,16 @@ const buttonTypes = {
 const Buttons: React.FC<{buttons: DialogButtonProps[]}> = ({buttons}) => {
   const autoFocusRef = useRef<HTMLButtonElement>(null)
   let autoFocusCount = 0
+  const [hasRendered, setHasRendered] = useState(0)
   useEffect(() => {
-    if (autoFocusRef.current) {
-      autoFocusRef.current.focus()
+    // hack to work around dialogs originating from other focus traps.
+    if (hasRendered === 1) {
+      autoFocusRef.current?.focus()
+    } else {
+      setHasRendered(hasRendered + 1)
     }
-  }, [])
+  }, [hasRendered])
+
   return (
     <>
       {buttons.map((dialogButtonProps, index) => {

src/stories/ConfirmationDialog.stories.tsx

@@ -3,6 +3,7 @@ import {Meta} from '@storybook/react'
 
 import {BaseStyles, Button, Flex, ThemeProvider, useTheme} from '..'
 import {ConfirmationDialog, useConfirm} from '../Dialog/ConfirmationDialog'
+import {ActionMenu} from '../ActionMenu'
 
 export default {
   title: 'Internal components/ConfirmationDialog',
@@ -78,3 +79,27 @@ export const ShorthandHook = () => {
     </Flex>
   )
 }
+
+export const ShorthandHookFromActionMenu = () => {
+  const confirm = useConfirm()
+  const [text, setText] = useState('open me')
+  const onButtonClick = useCallback(async () => {
+    if (await confirm({title: 'Are you sure?', content: 'Do you really want to do a trick?'})) {
+      setText('tada!')
+    }
+  }, [confirm])
+
+  return (
+    <Flex flexDirection="column" alignItems="flex-start">
+      <ActionMenu
+        renderAnchor={props => <Button {...props}>{text}</Button>}
+        items={[
+          {
+            text: 'Do a trick!',
+            onAction: onButtonClick
+          }
+        ]}
+      />
+    </Flex>
+  )
+}