feat: set focus on first form element CB-124

webapp/packages/authentication/src/Dialog/AuthProviderForm/AuthProviderForm.tsx

@@ -10,7 +10,7 @@ import { observer } from 'mobx-react';
 import { useCallback } from 'react';
 import styled from 'reshadow';
 
-import { InputField } from '@dbeaver/core/blocks';
+import { InputField, InFocus } from '@dbeaver/core/blocks';
 import { useStyles } from '@dbeaver/core/theming';
 
 import { AuthProvider } from '../../AuthProviderService';
@@ -32,21 +32,23 @@ export const AuthProviderForm = observer(function AuthProviderForm({
   }, [credentials]);
 
   return styled(useStyles(formStyles))(
-    <login-form as='div'>
-      {provider.credentialParameters.map(parameter => parameter.user && (
-        <group as="div" key={parameter.id}>
-          <InputField
-            type={parameter.encryption === 'none' ? 'text' : 'password'}
-            name={parameter.id}
-            value={credentials[parameter.id]}
-            onChange={value => handleChange(parameter.id, value)}
-            disabled={authenticate}
-            mod='surface'
-          >
-            {parameter.displayName}
-          </InputField>
-        </group>
-      ))}
-    </login-form>
+    <InFocus>
+      <login-form as='div'>
+        {provider.credentialParameters.map(parameter => parameter.user && (
+          <group as="div" key={parameter.id}>
+            <InputField
+              type={parameter.encryption === 'none' ? 'text' : 'password'}
+              name={parameter.id}
+              value={credentials[parameter.id]}
+              onChange={value => handleChange(parameter.id, value)}
+              disabled={authenticate}
+              mod='surface'
+            >
+              {parameter.displayName}
+            </InputField>
+          </group>
+        ))}
+      </login-form>
+    </InFocus>
   );
 });

webapp/packages/core/src/blocks/InFocus.tsx

@@ -0,0 +1,31 @@
+import React, {
+  useEffect, useRef, ReactElement, MutableRefObject
+} from 'react';
+
+type InFocusProps = {
+  children: ReactElement;
+}
+
+export function InFocus({ children }: InFocusProps) {
+  const isFirstRender: MutableRefObject<boolean> = useRef(true);
+  const childRef: MutableRefObject<HTMLElement | null> = useRef(null);
+
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      if (childRef.current !== null) {
+        const firstFocusable: HTMLElement | null = childRef.current
+          .querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        if (firstFocusable) {
+          firstFocusable.focus();
+        }
+
+      }
+    }
+  });
+  const childElement = React.Children.only(children);
+  return React.cloneElement(
+    childElement,
+    { ref: (el: HTMLElement) => childRef.current = el }
+  );
+}

webapp/packages/core/src/blocks/index.ts

@@ -21,4 +21,5 @@ export * from './ShadowInput';
 export * from './StaticImage';
 export * from './SubmittingForm';
 export * from './TextPlaceholder';
+export * from './InFocus';
 export * from './useClipboard';