From b40646e69b9c67aa761617f8d3d84be1cbcce505 Mon Sep 17 00:00:00 2001
From: alex <48489896+devnaumov@users.noreply.github.com>
Date: Tue, 14 May 2024 19:27:09 +0200
Subject: [PATCH] Cb 4931 auth dialog focus (#2602)

* CB-4931 focus first child of the auth form

* CB-4931 focus dialog from inner component

---------

Co-authored-by: Evgenia Bezborodova <139753579+EvgeniaBzzz@users.noreply.github.com>
Co-authored-by: Daria Marutkina <125263541+dariamarutkina@users.noreply.github.com>
---
 .../src/CommonDialog/CommonDialog/CommonDialogWrapper.tsx | 8 ++++++--
 .../plugin-authentication/src/Dialog/AuthDialog.tsx       | 7 ++++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/webapp/packages/core-blocks/src/CommonDialog/CommonDialog/CommonDialogWrapper.tsx b/webapp/packages/core-blocks/src/CommonDialog/CommonDialog/CommonDialogWrapper.tsx
index 70b8852092..d2c913dd9e 100644
--- a/webapp/packages/core-blocks/src/CommonDialog/CommonDialog/CommonDialogWrapper.tsx
+++ b/webapp/packages/core-blocks/src/CommonDialog/CommonDialog/CommonDialogWrapper.tsx
@@ -22,13 +22,17 @@ export interface CommonDialogWrapperProps {
   fixedSize?: boolean;
   fixedWidth?: boolean;
   freeHeight?: boolean;
+  autofocus?: boolean;
   className?: string;
   children?: React.ReactNode;
 }
 
 export const CommonDialogWrapper = observer<CommonDialogWrapperProps, HTMLDivElement>(
-  forwardRef(function CommonDialogWrapper({ size = 'medium', fixedSize, fixedWidth, freeHeight, 'aria-label': ariaLabel, className, children }, ref) {
-    const [focusedRef] = useFocus({ autofocus: true });
+  forwardRef(function CommonDialogWrapper(
+    { size = 'medium', fixedSize, fixedWidth, freeHeight, autofocus = true, 'aria-label': ariaLabel, className, children },
+    ref,
+  ) {
+    const [focusedRef] = useFocus({ autofocus });
     const computedStyles = useS(styles);
     const context = useContext(DialogContext);
     const dialogState = useDialogState({ visible: true });
diff --git a/webapp/packages/plugin-authentication/src/Dialog/AuthDialog.tsx b/webapp/packages/plugin-authentication/src/Dialog/AuthDialog.tsx
index 9013b7501d..dbec7fa912 100644
--- a/webapp/packages/plugin-authentication/src/Dialog/AuthDialog.tsx
+++ b/webapp/packages/plugin-authentication/src/Dialog/AuthDialog.tsx
@@ -148,7 +148,12 @@ export const AuthDialog: DialogComponent<IAuthOptions, null> = observer(function
         state.switchAuthMode(tabData.tabId);
       }}
     >
-      <CommonDialogWrapper className={s(styles, { wrapper: true })} size="large" aria-label={translate('authentication_login_dialog_title')}>
+      <CommonDialogWrapper
+        className={s(styles, { wrapper: true })}
+        size="large"
+        aria-label={translate('authentication_login_dialog_title')}
+        autofocus={false}
+      >
         <CommonDialogHeader
           title={dialogTitle}
           tooltip={tooltip}