diff --git a/packages/react-components/react-dialog/stories/Dialog/DialogTriggerOutsideDialog.md b/packages/react-components/react-dialog/stories/Dialog/DialogTriggerOutsideDialog.md index b5ff3a844e13a..8cc61c1143644 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 1e1227d9008ae..dc51ae617b222 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(null); + const [open, setOpen] = React.useState(false); + const [closeAction, setCloseAction] = React.useState(null); + + React.useEffect(() => { + // Prevents focusing on an initial render + if (open || closeAction === null) { + return; + } + + triggerRef.current?.focus(); + }, [closeAction, open]); + return ( <> - - setOpen(data.open)}> + + + { + setOpen(data.open); + setCloseAction(data.type); + }} + > Dialog title @@ -25,6 +54,7 @@ export const TriggerOutsideDialog = () => { est dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure cumque eaque? +