Auto-focus first input element in creation forms

Co-authored-by: René Pfeuffer<rene.pfeuffer@cloudogu.com>
Committed-by: René Pfeuffer<rene.pfeuffer@cloudogu.com>

gradle/changelog/auto-focus.yaml

@@ -0,0 +1,2 @@
+- type: changed
+  description: Set focus to first input element in repository, user, group, branch and repository role creation forms

scm-ui/ui-webapp/src/admin/roles/containers/RepositoryRoleForm.tsx

@@ -35,8 +35,8 @@ const RepositoryRoleForm: FC<Props> = ({ role: initialRole, submitForm }) => {
       name: "",
       verbs: [],
       _links: {
-        create: { href: createLink }
-      }
+        create: { href: createLink },
+      },
     }
   );
   const availableVerbs = data?.verbs;
@@ -51,7 +51,7 @@ const RepositoryRoleForm: FC<Props> = ({ role: initialRole, submitForm }) => {
   const handleVerbChange = (value: boolean, name: string) =>
     setRole({
       ...role,
-      verbs: value ? [...role.verbs, name] : role.verbs.filter(v => v !== name)
+      verbs: value ? [...role.verbs, name] : role.verbs.filter((v) => v !== name),
     });
 
   const submit = (event: FormEvent<HTMLFormElement>) => {
@@ -72,6 +72,7 @@ const RepositoryRoleForm: FC<Props> = ({ role: initialRole, submitForm }) => {
         onChange={handleNameChange}
         value={role.name || ""}
         disabled={!!initialRole}
+        autofocus
       />
       <div className="field">
         <label className="label">{t("repositoryRole.form.permissions")}</label>

scm-ui/ui-webapp/src/groups/components/GroupForm.tsx

@@ -118,6 +118,7 @@ const GroupForm: FC<Props> = ({ submitForm, loading, group, transmittedName = ""
         value={groupState.name}
         validationError={nameValidationError}
         helpText={t("groupForm.help.nameHelpText")}
+        autofocus
       />
     );
   } else if (group.external) {

scm-ui/ui-webapp/src/repos/branches/components/BranchForm.tsx

@@ -28,6 +28,8 @@ type Props = {
   disabled?: boolean;
 };
 
+const autoFocus = (el) => el?.focus();
+
 const BranchForm: FC<Props> = ({ submitForm, branches, disabled, transmittedName, loading }) => {
   const [t] = useTranslation("repos");
   const [name, setName] = useState(transmittedName || "");
@@ -45,15 +47,15 @@ const BranchForm: FC<Props> = ({ submitForm, branches, disabled, transmittedName
     if (isValid()) {
       submitForm({
         name,
-        parent: source
+        parent: source,
       });
     }
   };
 
   orderBranches(branches);
-  const options = branches.map(branch => ({
+  const options = branches.map((branch) => ({
     label: branch.name,
-    value: branch.name
+    value: branch.name,
   }));
 
   return (
@@ -65,9 +67,10 @@ const BranchForm: FC<Props> = ({ submitForm, branches, disabled, transmittedName
               name="source"
               label={t("branches.create.source")}
               options={options}
-              onChange={setSource}
+              onChange={(e) => setSource(e.target.value)}
               loading={loading}
               disabled={disabled}
+              ref={autoFocus}
             />
             <InputField
               name="name"

scm-ui/ui-webapp/src/repos/components/NamespaceAndNameFields.tsx

@@ -97,6 +97,7 @@ const NamespaceAndNameFields: FC<Props> = ({ repository, onChange, setValid, dis
         helpText={t("help.nameHelpText")}
         disabled={disabled}
         required={true}
+        autofocus={namespaceStrategy !== CUSTOM_NAMESPACE_STRATEGY}
       />
     </>
   );

scm-ui/ui-webapp/src/repos/components/NamespaceInput.tsx

@@ -72,6 +72,7 @@ const NamespaceInput: FC<Props> = ({
         required={true}
         aria-required={true}
         nullable
+        ref={(el) => el?.focus()}
       />
     );
   }

scm-ui/ui-webapp/src/users/containers/CreateUser.tsx

@@ -68,6 +68,7 @@ const CreateUserForm: FC<{ users: UserCollection }> = ({ users }) => {
                   validate: userValidator.isNameValid,
                 }}
                 testId="input-username"
+                autoFocus
               />
               <Form.Input
                 name="displayName"