From bb017ecc774856056e954b0c63a9be96264d891c Mon Sep 17 00:00:00 2001
From: Frederic Jahn <frederic.jahn@hanko.io>
Date: Tue, 25 Jul 2023 14:54:48 +0200
Subject: [PATCH] fix: only set prefilledEmail when email input is empty

---
 frontend/elements/src/contexts/AppProvider.tsx | 2 +-
 frontend/elements/src/pages/LoginEmailPage.tsx | 9 +++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/elements/src/contexts/AppProvider.tsx b/frontend/elements/src/contexts/AppProvider.tsx
index ae789f966..d0f3417d7 100644
--- a/frontend/elements/src/contexts/AppProvider.tsx
+++ b/frontend/elements/src/contexts/AppProvider.tsx
@@ -77,7 +77,7 @@ interface Context extends States {
   enablePasskeys: boolean;
   lang: string;
   hidePasskeyButtonOnLogin: boolean;
-  prefilledEmail: string;
+  prefilledEmail?: string;
 }
 
 export const AppContext = createContext<Context>(null);
diff --git a/frontend/elements/src/pages/LoginEmailPage.tsx b/frontend/elements/src/pages/LoginEmailPage.tsx
index 31e5b30d9..78d1bf740 100644
--- a/frontend/elements/src/pages/LoginEmailPage.tsx
+++ b/frontend/elements/src/pages/LoginEmailPage.tsx
@@ -59,7 +59,7 @@ const LoginEmailPage = (props: Props) => {
   } = useContext(AppContext);
 
   const [emailAddress, setEmailAddress] = useState<string>(
-    props.emailAddress || prefilledEmail
+    props.emailAddress || prefilledEmail || ""
   );
   const [isPasskeyLoginLoading, setIsPasskeyLoginLoading] = useState<boolean>();
   const [isPasskeyLoginSuccess, setIsPasskeyLoginSuccess] = useState<boolean>();
@@ -387,7 +387,12 @@ const LoginEmailPage = (props: Props) => {
   }, [hanko, setPage, isThirdPartyLoginLoading]);
 
   useEffect(() => {
-    setEmailAddress(prefilledEmail);
+    if (emailAddress.length === 0 && prefilledEmail !== undefined) {
+      setEmailAddress(prefilledEmail);
+    }
+    // The dependency array is missing the emailAddress parameter intentionally because if it is not missing the email
+    // would always be reset to the prefilledEmail when the input is empty
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [prefilledEmail]);
 
   return (