fix(clerk-js): Make the instant password field focusable if autofilled

Author: desiprisg

.changeset/tall-roses-invent.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Make the instant password field focusable if it is autofilled.

packages/clerk-js/src/ui.retheme/components/SignIn/SignInStart.tsx

@@ -341,6 +341,7 @@ export function _SignInStart(): JSX.Element {
 const InstantPasswordRow = ({ field }: { field?: FormControlState<'password'> }) => {
   const [autofilled, setAutofilled] = useState(false);
   const ref = useRef<HTMLInputElement>(null);
+  const show = !!(autofilled || field?.value);
 
   // show password if it's autofilled by the browser
   useLayoutEffect(() => {
@@ -373,14 +374,12 @@ const InstantPasswordRow = ({ field }: { field?: FormControlState<'password'> })
   return (
     <Form.ControlRow
       elementId={field.id}
-      sx={
-        !field.value && !autofilled ? { opacity: 0, height: 0, pointerEvents: 'none', marginTop: '-1rem' } : undefined
-      }
+      sx={show ? undefined : { opacity: 0, height: 0, pointerEvents: 'none', marginTop: '-1rem' }}
     >
       <Form.PasswordInput
         {...field.props}
         ref={ref}
-        tabIndex={!field.value ? -1 : undefined}
+        tabIndex={show ? undefined : -1}
       />
     </Form.ControlRow>
   );

packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx

@@ -341,6 +341,7 @@ export function _SignInStart(): JSX.Element {
 const InstantPasswordRow = ({ field }: { field?: FormControlState<'password'> }) => {
   const [autofilled, setAutofilled] = useState(false);
   const ref = useRef<HTMLInputElement>(null);
+  const show = !!(autofilled || field?.value);
 
   // show password if it's autofilled by the browser
   useLayoutEffect(() => {
@@ -373,14 +374,12 @@ const InstantPasswordRow = ({ field }: { field?: FormControlState<'password'> })
   return (
     <Form.ControlRow
       elementId={field.id}
-      sx={
-        !field.value && !autofilled ? { opacity: 0, height: 0, pointerEvents: 'none', marginTop: '-1rem' } : undefined
-      }
+      sx={show ? undefined : { opacity: 0, height: 0, pointerEvents: 'none', marginTop: '-1rem' }}
     >
       <Form.PasswordInput
         {...field.props}
         ref={ref}
-        tabIndex={!field.value ? -1 : undefined}
+        tabIndex={show ? undefined : -1}
       />
     </Form.ControlRow>
   );