diff --git a/client/ui/frontend/src/components/switches/SwitchItem.tsx b/client/ui/frontend/src/components/switches/SwitchItem.tsx index 20beea80d..e23c73fe3 100644 --- a/client/ui/frontend/src/components/switches/SwitchItem.tsx +++ b/client/ui/frontend/src/components/switches/SwitchItem.tsx @@ -19,7 +19,8 @@ export const SwitchItem = ({ value, children, className }: Props) => { value={value} className={cn( "relative inline-flex items-center justify-center gap-1 rounded-md px-3.5 py-2 text-xs font-semibold", - "outline-none cursor-default", + "cursor-default outline-none", + "focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-nb-gray-940", active ? "text-nb-gray-100" : "text-nb-gray-400 hover:text-nb-gray-200 active:text-nb-gray-100", diff --git a/client/ui/frontend/src/modules/welcome/WelcomeStepManagement.tsx b/client/ui/frontend/src/modules/welcome/WelcomeStepManagement.tsx index fee470262..5cb04d484 100644 --- a/client/ui/frontend/src/modules/welcome/WelcomeStepManagement.tsx +++ b/client/ui/frontend/src/modules/welcome/WelcomeStepManagement.tsx @@ -39,12 +39,21 @@ export function WelcomeStepManagement({ const trimmedUrl = url.trim(); const syntaxValid = mode === ManagementMode.Cloud || isValidManagementUrl(trimmedUrl); const inputRef = useRef(null); + const initialMountRef = useRef(true); + const initialSelfHostedRef = useRef(!startsCloud); useEffect(() => { setSyntaxError(null); setUnreachable(false); }, [url, mode]); + useEffect(() => { + if (initialMountRef.current && initialSelfHostedRef.current) { + inputRef.current?.focus(); + } + initialMountRef.current = false; + }, []); + const handleContinue = useCallback(async () => { if (checking) return; if (mode === ManagementMode.SelfHosted && (!trimmedUrl || !syntaxValid)) { @@ -102,7 +111,6 @@ export function WelcomeStepManagement({ onChange={(e) => setUrl(e.target.value)} error={inputError} warning={inputWarning} - autoFocus spellCheck={false} autoComplete={"off"} autoCorrect={"off"}