Make ModalDialogs restore focus by default

hypothesis · Mar 21, 2023 · 6175c03 · 6175c03
1 parent 5aac4e3
commit 6175c03
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 15 deletions.
diff --git a/src/components/feedback/ModalDialog.tsx b/src/components/feedback/ModalDialog.tsx
@@ -27,6 +27,7 @@ const ModalDialogNext = function ModalDialog({
   closeOnClickAway = false,
   closeOnFocusAway = false,
   initialFocus = 'auto',
+  restoreFocus = true,
 
   ...htmlAndPanelAttributes
 }: ModalDialogProps) {
@@ -43,6 +44,7 @@ const ModalDialogNext = function ModalDialog({
         closeOnFocusAway={closeOnFocusAway}
         closeOnEscape={closeOnEscape}
         initialFocus={initialFocus}
+        restoreFocus={restoreFocus}
         classes={classnames(
           // Column-flex layout to constrain content to max-height
           'flex flex-col',

diff --git a/src/components/feedback/test/ModalDialog-test.js b/src/components/feedback/test/ModalDialog-test.js
@@ -36,4 +36,14 @@ describe('ModalDialog', () => {
       assert.isFalse(dialogProps.closeOnFocusAway);
     });
   });
+
+  describe('restoring focus', () => {
+    it('restores focus by default', () => {
+      const wrapper = mount(
+        <ModalDialog title="Test modal dialog">This is my dialog</ModalDialog>
+      );
+      const dialogProps = wrapper.find('Dialog').props();
+      assert.isTrue(dialogProps.restoreFocus);
+    });
+  });
 });
diff --git a/src/pattern-library/components/patterns/feedback/ModalDialogPage.tsx b/src/pattern-library/components/patterns/feedback/ModalDialogPage.tsx
@@ -32,6 +32,7 @@ function ModalDialogButtons() {
 type ModalDialog_Props = ModalDialogProps & {
   /** Pattern-wrapping prop. Not visible in source view */
   _nonCloseable?: boolean;
+  _alwaysShowButton?: boolean;
 };
 
 /**
@@ -40,6 +41,7 @@ type ModalDialog_Props = ModalDialogProps & {
  */
 function ModalDialog_({
   buttons,
+  _alwaysShowButton = false,
   _nonCloseable,
   children,
   ...dialogProps
@@ -54,22 +56,25 @@ function ModalDialog_({
     <Button onClick={closeDialog}>Escape!</Button>
   );
 
-  if (!dialogOpen) {
-    return (
-      <Button onClick={() => setDialogOpen(!dialogOpen)} variant="primary">
-        Show modal dialog
-      </Button>
-    );
-  }
+  const openButton = (
+    <Button onClick={() => setDialogOpen(!dialogOpen)} variant="primary">
+      {dialogOpen ? 'Hide' : 'Show'} dialog
+    </Button>
+  );
 
   return (
-    <ModalDialog
-      buttons={forwardedButtons}
-      {...dialogProps}
-      onClose={closeHandler}
-    >
-      {children}
-    </ModalDialog>
+    <>
+      {(!dialogOpen || _alwaysShowButton) && openButton}
+      {dialogOpen && (
+        <ModalDialog
+          buttons={forwardedButtons}
+          {...dialogProps}
+          onClose={closeHandler}
+        >
+          {children}
+        </ModalDialog>
+      )}
+    </>
   );
 }
 
@@ -98,10 +103,11 @@ export default function ModalDialogPage() {
           <Library.Usage componentName="ModalDialog" />
           <p>
             By default, <code>ModalDialog</code>s close when the ESC key is
-            pressed.
+            pressed, and will restore focus when closed.
           </p>
           <Library.Demo title="Basic ModalDialog" withSource>
             <ModalDialog_
+              _alwaysShowButton
               buttons={<ModalDialogButtons />}
               icon={EditIcon}
               initialFocus={inputRef}