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 <[email protected]> Co-authored-by: Daria Marutkina <[email protected]>
dbeaver · May 14, 2024 · b40646e · b40646e
1 parent 003a89b
commit b40646e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git 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
@@ -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}