From 3c0ea0a6ba498eda911da22603e6f51e11976151 Mon Sep 17 00:00:00 2001
From: George Desipris <george.desipris.56@gmail.com>
Date: Thu, 7 Dec 2023 11:35:51 +0200
Subject: [PATCH] fix(clerk-js): Make the instant password field focusable if
 autofilled

---
 .changeset/tall-roses-invent.md                            | 5 +++++
 .../src/ui.retheme/components/SignIn/SignInStart.tsx       | 7 +++----
 packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx | 7 +++----
 3 files changed, 11 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/tall-roses-invent.md

diff --git a/.changeset/tall-roses-invent.md b/.changeset/tall-roses-invent.md
new file mode 100644
index 00000000000..20086b03a8c
--- /dev/null
+++ b/.changeset/tall-roses-invent.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Make the instant password field focusable if it is autofilled.
diff --git a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInStart.tsx b/packages/clerk-js/src/ui.retheme/components/SignIn/SignInStart.tsx
index f75bbba8b56..44eb5314ab2 100644
--- a/packages/clerk-js/src/ui.retheme/components/SignIn/SignInStart.tsx
+++ b/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>
   );
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
index f75bbba8b56..44eb5314ab2 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
+++ b/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>
   );