base directly on top of 28.0.4

src/Dialog/Dialog.tsx

@@ -342,10 +342,14 @@ const Buttons: React.FC<{buttons: DialogButtonProps[]}> = ({buttons}) => {
   const autoFocusRef = useRef<HTMLButtonElement>(null)
   let autoFocusCount = 0
   useEffect(() => {
-    if (autoFocusRef.current) {
-      autoFocusRef.current.focus()
-    }
+    // hack to work around dialogs originating from other focus traps.
+    setTimeout(() => {
+      if (autoFocusRef.current) {
+        autoFocusRef.current.focus()
+      }
+    })
   }, [])
+
   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>
+  )
+}