diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx index ab69cebc93f4d..9df57ff493a78 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx @@ -28,6 +28,7 @@ import { useContext, useEffect, useId, + useRef, useState, } from "react"; import { getFormHelpers, nameValidator } from "utils/formUtils"; @@ -103,6 +104,7 @@ export const CreateWorkspacePageViewExperimental: FC< ); const [showPresetParameters, setShowPresetParameters] = useState(false); const id = useId(); + const workspaceNameInputRef = useRef(null); const rerollSuggestedName = useCallback(() => { setSuggestedName(() => generateWorkspaceName()); }, []); @@ -140,10 +142,15 @@ export const CreateWorkspacePageViewExperimental: FC< } }, [error]); - const getFieldHelpers = getFormHelpers( - form, - error, - ); + useEffect(() => { + if (form.submitCount > 0 && form.errors) { + workspaceNameInputRef.current?.scrollIntoView({ + behavior: "smooth", + block: "center", + }); + workspaceNameInputRef.current?.focus(); + } + }, [form.submitCount, form.errors]); const [presetOptions, setPresetOptions] = useState([ { label: "None", value: "" }, @@ -333,9 +340,10 @@ export const CreateWorkspacePageViewExperimental: FC< -
+
{ form.setFieldValue("name", e.target.value.trim()); @@ -343,6 +351,11 @@ export const CreateWorkspacePageViewExperimental: FC< }} disabled={creatingWorkspace} /> + {form.touched.name && form.errors.name && ( +
+ {form.errors.name} +
+ )}
Need a suggestion?