From f8821a8d98a28e9f781c67c4ae8cac26b9345562 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Thu, 14 Nov 2024 10:29:00 -0500 Subject: [PATCH 1/3] fix(clerk-js): Ensure autofill event is triggered during sign-in --- packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx index f55510885e6..5bad609e307 100644 --- a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx +++ b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx @@ -448,7 +448,10 @@ const InstantPasswordRow = ({ field }: { field?: FormControlState<'password'> }) useLayoutEffect(() => { const intervalId = setInterval(() => { if (ref?.current) { - const autofilled = window.getComputedStyle(ref.current, ':autofill').animationName === 'onAutoFillStart'; + const autofilled = + window.getComputedStyle(ref.current, ':autofill').animationName === 'onAutoFillStart' || + // https://github.com/facebook/react/issues/1159#issuecomment-1025423604 + !!document.getElementById('password-field')?.matches('*:-webkit-autofill'); if (autofilled) { setAutofilled(autofilled); clearInterval(intervalId); From 23e37eb04ce918499098fff03d96a2a4df94ef49 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Thu, 14 Nov 2024 10:33:28 -0500 Subject: [PATCH 2/3] use ref --- packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx index 5bad609e307..028170a46c7 100644 --- a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx +++ b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx @@ -451,7 +451,7 @@ const InstantPasswordRow = ({ field }: { field?: FormControlState<'password'> }) const autofilled = window.getComputedStyle(ref.current, ':autofill').animationName === 'onAutoFillStart' || // https://github.com/facebook/react/issues/1159#issuecomment-1025423604 - !!document.getElementById('password-field')?.matches('*:-webkit-autofill'); + !!ref.current?.matches('*:-webkit-autofill'); if (autofilled) { setAutofilled(autofilled); clearInterval(intervalId); From 1574083637c798f9bb6af7e58085a051c6d71840 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Thu, 14 Nov 2024 10:53:02 -0500 Subject: [PATCH 3/3] add changeset --- .changeset/spicy-olives-float.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/spicy-olives-float.md diff --git a/.changeset/spicy-olives-float.md b/.changeset/spicy-olives-float.md new file mode 100644 index 00000000000..e0a186e2b64 --- /dev/null +++ b/.changeset/spicy-olives-float.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Fixes an issue where the password field would not render during autofill event until the user interacted with the screen.