Add support for initial focus ref to Dialog 2

Author: broccolinisoup

packages/react/src/Dialog/Dialog.features.stories.tsx

@@ -1,5 +1,5 @@
 import React, {useState, useRef, useCallback} from 'react'
-import {Box, TextInput, Text, Button} from '..'
+import {Box, TextInput, Text, Button, ActionList} from '..'
 import type {DialogProps, DialogWidth, DialogHeight} from './Dialog'
 import {Dialog} from './Dialog'
 
@@ -304,3 +304,29 @@ export const ReturnFocusRef = () => {
     </React.Suspense>
   )
 }
+
+export const NewIssues = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const onDialogClose = useCallback(() => setIsOpen(false), [])
+  const initialFocusRef = useRef(null)
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Show dialog</Button>
+      {isOpen ? (
+        <Dialog
+          initialFocusRef={initialFocusRef}
+          onClose={onDialogClose}
+          title="New issue"
+          renderBody={() => (
+            <ActionList>
+              <ActionList.LinkItem ref={initialFocusRef} href="https://github.com">
+                Item 1
+              </ActionList.LinkItem>
+              <ActionList.LinkItem href="https://github.com">Link</ActionList.LinkItem>
+            </ActionList>
+          )}
+        ></Dialog>
+      ) : null}
+    </>
+  )
+}

packages/react/src/Dialog/Dialog.tsx

@@ -138,6 +138,11 @@ export interface DialogProps extends SxProp {
    * instead of the element that had focus immediately before the Dialog opened
    */
   returnFocusRef?: React.RefObject<HTMLElement>
+
+  /**
+   * The element to focus when the Dialog opens
+   */
+  initialFocusRef?: React.RefObject<HTMLElement>
 }
 
 /**
@@ -403,6 +408,7 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
     footerButtons = [],
     position = defaultPosition,
     returnFocusRef,
+    initialFocusRef,
     sx,
   } = props
   const dialogLabelId = useId()
@@ -429,7 +435,7 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
 
   useFocusTrap({
     containerRef: dialogRef,
-    initialFocusRef: autoFocusedFooterButtonRef,
+    initialFocusRef: initialFocusRef ?? autoFocusedFooterButtonRef,
     restoreFocusOnCleanUp: returnFocusRef?.current ? false : true,
     returnFocusRef,
   })

packages/react/src/__tests__/Dialog.test.tsx

@@ -4,7 +4,7 @@ import {render as HTMLRender, fireEvent} from '@testing-library/react'
 import axe from 'axe-core'
 import {behavesAsComponent, checkExports} from '../utils/testing'
 
-/* Dialog Version 2 */
+/* Dialog Version 1*/
 
 const comp = (
   <Dialog isOpen onDismiss={() => null} aria-labelledby="header">