From 2a45504774473207efd017e2b2b1065fe54605f8 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Thu, 8 Jun 2023 12:19:04 +0200
Subject: [PATCH] docs(react-dialog): update DialogTriggerOutsideDialog to
 include focus behavior

---
 .../Dialog/DialogTriggerOutsideDialog.md      |  4 ++-
 .../DialogTriggerOutsideDialog.stories.tsx    | 34 +++++++++++++++++--
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/packages/react-components/react-dialog/stories/Dialog/DialogTriggerOutsideDialog.md b/packages/react-components/react-dialog/stories/Dialog/DialogTriggerOutsideDialog.md
index b5ff3a844e13a4..8cc61c11436445 100644
--- a/packages/react-components/react-dialog/stories/Dialog/DialogTriggerOutsideDialog.md
+++ b/packages/react-components/react-dialog/stories/Dialog/DialogTriggerOutsideDialog.md
@@ -1 +1,3 @@
-There's absolutely no benefit in using `DialogTrigger` outside of `Dialog`, just use controlled state with a button instead.
+`DialogTrigger` is not a component that can be used outside of `Dialog`. If you want to trigger the dialog from outside of `Dialog`, you should use controlled state instead.
+
+> ⚠️ Note: As there will be no `DialogTrigger`, you should handle focus restoration when the dialog gets closed.
diff --git a/packages/react-components/react-dialog/stories/Dialog/DialogTriggerOutsideDialog.stories.tsx b/packages/react-components/react-dialog/stories/Dialog/DialogTriggerOutsideDialog.stories.tsx
index 1e1227d9008ae3..dc51ae617b2229 100644
--- a/packages/react-components/react-dialog/stories/Dialog/DialogTriggerOutsideDialog.stories.tsx
+++ b/packages/react-components/react-dialog/stories/Dialog/DialogTriggerOutsideDialog.stories.tsx
@@ -8,15 +8,44 @@ import {
   DialogTrigger,
   DialogBody,
   Button,
+  DialogOpenChangeData,
 } from '@fluentui/react-components';
 import story from './DialogTriggerOutsideDialog.md';
 
 export const TriggerOutsideDialog = () => {
+  const triggerRef = React.useRef<HTMLButtonElement>(null);
+
   const [open, setOpen] = React.useState(false);
+  const [closeAction, setCloseAction] = React.useState<DialogOpenChangeData['type'] | null>(null);
+
+  React.useEffect(() => {
+    // Prevents focusing on an initial render
+    if (open || closeAction === null) {
+      return;
+    }
+
+    triggerRef.current?.focus();
+  }, [closeAction, open]);
+
   return (
     <>
-      <Button onClick={() => setOpen(true)}>Open Dialog</Button>
-      <Dialog open={open} onOpenChange={(event, data) => setOpen(data.open)}>
+      <Button
+        onClick={() => {
+          setOpen(true);
+          setCloseAction(null);
+        }}
+        ref={triggerRef}
+      >
+        Open Dialog
+      </Button>
+
+      <Dialog
+        open={open}
+        onOpenChange={(event, data) => {
+          setOpen(data.open);
+          setCloseAction(data.type);
+        }}
+      >
         <DialogSurface>
           <DialogBody>
             <DialogTitle>Dialog title</DialogTitle>
@@ -25,6 +54,7 @@ export const TriggerOutsideDialog = () => {
               est dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure
               cumque eaque?
             </DialogContent>
+
             <DialogActions>
               <DialogTrigger disableButtonEnhancement>
                 <Button appearance="secondary">Close</Button>