diff --git a/apps/web/src/views/onboarding/workspace-details/index.tsx b/apps/web/src/views/onboarding/workspace-details/index.tsx index f1eba15a..a9414729 100644 --- a/apps/web/src/views/onboarding/workspace-details/index.tsx +++ b/apps/web/src/views/onboarding/workspace-details/index.tsx @@ -43,8 +43,16 @@ export default function WorkspaceNameView() { const [name, setName] = useState(""); const [slug, setSlug] = useState(""); + const [slugManuallyEdited, setSlugManuallyEdited] = useState(false); const [description, setDescription] = useState(""); + const handleNameChange = (value: string) => { + setName(value); + if (isProToggle && !slugManuallyEdited) { + setSlug(slugify(value)); + } + }; + const [debouncedSlug] = useDebounce(slug, 500); const isTyping = slug !== debouncedSlug; @@ -178,7 +186,7 @@ export default function WorkspaceNameView() { id="workspace-name-input" placeholder={t`Workspace name`} value={name} - onChange={(e) => setName(e.target.value)} + onChange={(e) => handleNameChange(e.target.value)} onKeyDown={(e) => e.key === "Enter" && handleContinue()} maxLength={64} /> @@ -187,7 +195,8 @@ export default function WorkspaceNameView() { + onChange={(e) => { + setSlugManuallyEdited(true); setSlug( e.target.value .toLowerCase() @@ -195,8 +204,8 @@ export default function WorkspaceNameView() { .replace(/\s+/g, "-") .replace(/-+/g, "-") .slice(0, 60), - ) - } + ); + }} disabled={!isProToggle} prefix="kan.bn/" className={