chore(clerk-js): Preserve password input focus on error (#4240)

clerk · Sep 27, 2024 · 7f87391 · 7f87391
1 parent 40bf962
commit 7f87391
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/.changeset/brave-plants-lick.md b/.changeset/brave-plants-lick.md
@@ -0,0 +1,5 @@
+---
+"@clerk/clerk-js": patch
+---
+
+Maintain focus on password input after error during sign in flow.
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx
@@ -45,6 +45,7 @@ const usePasswordControl = (props: SignInFactorOnePasswordProps) => {
 
 export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps) => {
   const { onShowAlternativeMethodsClick, onPasswordPwned } = props;
+  const passwordInputRef = React.useRef<HTMLInputElement>(null);
   const card = useCardState();
   const { setActive } = useClerk();
   const signIn = useCoreSignIn();
@@ -87,6 +88,8 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
         }
 
         handleError(err, [passwordControl], card.setError);
+
+        setTimeout(() => passwordInputRef.current?.focus(), 0);
       });
   };
 
@@ -129,6 +132,7 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
               <Form.ControlRow elementId={passwordControl.id}>
                 <Form.PasswordInput
                   {...passwordControl.props}
+                  ref={passwordInputRef}
                   autoFocus
                 />
               </Form.ControlRow>