fix: use tabster to focus on trigger, instead of manually invoking .focus (#27512)

bsunderhus · web-flow · commit 841ea75d516d · 2023-04-11T20:32:23.000+02:00
diff --git a/change/@fluentui-react-dialog-cf9d38c8-ab12-4076-a506-5ea38a1ce8c8.json b/change/@fluentui-react-dialog-cf9d38c8-ab12-4076-a506-5ea38a1ce8c8.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: use tabster to focus on trigger, instead of manually invoking .focus",
+  "packageName": "@fluentui/react-dialog",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-dialog/src/utils/useFocusFirstElement.ts b/packages/react-components/react-dialog/src/utils/useFocusFirstElement.ts
@@ -11,13 +11,11 @@ export function useFocusFirstElement(open: boolean, modalType: DialogModalType)
   const { findFirstFocusable } = useFocusFinders();
   const { targetDocument } = useFluent_unstable();
   const dialogRef = React.useRef<DialogSurfaceElement>(null);
-  const triggerRef = React.useRef<HTMLElement>();
 
   React.useEffect(() => {
     if (!open) {
-      return triggerRef.current?.focus();
+      return;
     }
-    triggerRef.current = targetDocument?.activeElement as HTMLElement | undefined;
     const element = dialogRef.current && findFirstFocusable(dialogRef.current);
     if (element) {
       element.focus();
