diff --git a/gradle/changelog/auto-focus.yaml b/gradle/changelog/auto-focus.yaml new file mode 100644 index 0000000000..a82c309cb8 --- /dev/null +++ b/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 diff --git a/scm-ui/ui-webapp/src/admin/roles/containers/RepositoryRoleForm.tsx b/scm-ui/ui-webapp/src/admin/roles/containers/RepositoryRoleForm.tsx index edcd839ad1..63ee6bb3e6 100644 --- a/scm-ui/ui-webapp/src/admin/roles/containers/RepositoryRoleForm.tsx +++ b/scm-ui/ui-webapp/src/admin/roles/containers/RepositoryRoleForm.tsx @@ -35,8 +35,8 @@ const RepositoryRoleForm: FC = ({ role: initialRole, submitForm }) => { name: "", verbs: [], _links: { - create: { href: createLink } - } + create: { href: createLink }, + }, } ); const availableVerbs = data?.verbs; @@ -51,7 +51,7 @@ const RepositoryRoleForm: FC = ({ 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) => { @@ -72,6 +72,7 @@ const RepositoryRoleForm: FC = ({ role: initialRole, submitForm }) => { onChange={handleNameChange} value={role.name || ""} disabled={!!initialRole} + autofocus />
diff --git a/scm-ui/ui-webapp/src/groups/components/GroupForm.tsx b/scm-ui/ui-webapp/src/groups/components/GroupForm.tsx index 4c28c35804..db8f189983 100644 --- a/scm-ui/ui-webapp/src/groups/components/GroupForm.tsx +++ b/scm-ui/ui-webapp/src/groups/components/GroupForm.tsx @@ -118,6 +118,7 @@ const GroupForm: FC = ({ submitForm, loading, group, transmittedName = "" value={groupState.name} validationError={nameValidationError} helpText={t("groupForm.help.nameHelpText")} + autofocus /> ); } else if (group.external) { diff --git a/scm-ui/ui-webapp/src/repos/branches/components/BranchForm.tsx b/scm-ui/ui-webapp/src/repos/branches/components/BranchForm.tsx index 9556ce4516..59976867e7 100644 --- a/scm-ui/ui-webapp/src/repos/branches/components/BranchForm.tsx +++ b/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 = ({ submitForm, branches, disabled, transmittedName, loading }) => { const [t] = useTranslation("repos"); const [name, setName] = useState(transmittedName || ""); @@ -45,15 +47,15 @@ const BranchForm: FC = ({ 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 = ({ 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} /> = ({ repository, onChange, setValid, dis helpText={t("help.nameHelpText")} disabled={disabled} required={true} + autofocus={namespaceStrategy !== CUSTOM_NAMESPACE_STRATEGY} /> ); diff --git a/scm-ui/ui-webapp/src/repos/components/NamespaceInput.tsx b/scm-ui/ui-webapp/src/repos/components/NamespaceInput.tsx index 722584e636..5f2ca08431 100644 --- a/scm-ui/ui-webapp/src/repos/components/NamespaceInput.tsx +++ b/scm-ui/ui-webapp/src/repos/components/NamespaceInput.tsx @@ -72,6 +72,7 @@ const NamespaceInput: FC = ({ required={true} aria-required={true} nullable + ref={(el) => el?.focus()} /> ); } diff --git a/scm-ui/ui-webapp/src/users/containers/CreateUser.tsx b/scm-ui/ui-webapp/src/users/containers/CreateUser.tsx index e2b1ffdd8e..ad07e3fb57 100644 --- a/scm-ui/ui-webapp/src/users/containers/CreateUser.tsx +++ b/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 />