From 5bd65aa2674bcf768e463668f4d159948820b420 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 15 Nov 2024 11:12:03 -0500 Subject: [PATCH] fix(clerk-js): Ensure autofill event is triggered during sign-in (#4560) --- .changeset/spicy-olives-float.md | 5 +++++ packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx | 5 ++++- 2 files changed, 9 insertions(+), 1 deletion(-) 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 0000000000..e0a186e2b6 --- /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. diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx index f55510885e..028170a46c 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 + !!ref.current?.matches('*:-webkit-autofill'); if (autofilled) { setAutofilled(autofilled); clearInterval(intervalId);