fix: fix field focus on TPA delayed Calls (#109)

edx · Jul 10, 2024 · 71a8b90 · 71a8b90
1 parent 2e9910b
commit 71a8b90
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 7 deletions.
diff --git a/src/forms/login-popup/index.jsx b/src/forms/login-popup/index.jsx
@@ -55,6 +55,7 @@ const LoginForm = () => {
   const socialAuthnButtonRef = useRef(null);
   const errorAlertRef = useRef(null);
   const loginFormHeadingRef = useRef(null);
+  const isEditingFieldRef = useRef(false);
 
   const loginResult = useSelector(state => state.login.loginResult);
   const loginErrorCode = useSelector(state => state.login.loginError?.errorCode);
@@ -86,15 +87,15 @@ const LoginForm = () => {
 
   useEffect(() => {
     if (thirdPartyAuthApiStatus === COMPLETE_STATE && accountActivation === null) {
-      if (providers.length > 0 && socialAuthnButtonRef.current) {
+      if (providers.length > 0 && socialAuthnButtonRef.current && !isEditingFieldRef.current) {
         socialAuthnButtonRef.current.focus();
-      } else if (emailOrUsernameRef.current) {
+      } else if (emailOrUsernameRef.current && !isEditingFieldRef.current) {
         emailOrUsernameRef.current.focus();
       }
     } else if (thirdPartyAuthApiStatus === FAILURE_STATE && accountActivation === null) {
       emailOrUsernameRef.current.focus();
     }
-  }, [accountActivation, thirdPartyAuthApiStatus, providers]);
+  }, [accountActivation, thirdPartyAuthApiStatus, providers, isEditingFieldRef]);
 
   useEffect(() => {
     if (moveScrollToTop) {
@@ -174,11 +175,17 @@ const LoginForm = () => {
   const handleOnChange = (event) => {
     const { name, value } = event.target;
     setFormFields(prevState => ({ ...prevState, [name]: value }));
+    isEditingFieldRef.current = true;
   };
 
   const handleOnFocus = (event) => {
     const { name } = event.target;
     setFormErrors(prevErrors => ({ ...prevErrors, [name]: '' }));
+    isEditingFieldRef.current = true;
+  };
+
+  const handleBlur = () => {
+    isEditingFieldRef.current = false;
   };
 
   const handleForgotPasswordClick = () => {
@@ -256,6 +263,7 @@ const LoginForm = () => {
           errorMessage={formErrors.emailOrUsername}
           handleChange={handleOnChange}
           handleFocus={handleOnFocus}
+          onBlur={handleBlur}
           ref={emailOrUsernameRef}
         />
         <PasswordField
@@ -264,6 +272,7 @@ const LoginForm = () => {
           errorMessage={formErrors.password}
           handleChange={handleOnChange}
           handleFocus={handleOnFocus}
+          onBlur={handleBlur}
           floatingLabel={formatMessage(messages.loginFormPasswordFieldLabel)}
           showPasswordTooltip={false}
         />

diff --git a/src/forms/registration-popup/index.jsx b/src/forms/registration-popup/index.jsx
@@ -74,6 +74,7 @@ const RegistrationForm = () => {
   const registerErrorAlertRef = useRef(null);
   const socialAuthnButtonRef = useRef(null);
   const registerFormHeadingRef = useRef(null);
+  const focusedFieldRef = useRef(null);
   const queryParams = useMemo(() => getAllPossibleQueryParams(), []);
   const { subjectsList, subjectsLoading } = useSubjectsList();
 
@@ -129,9 +130,9 @@ const RegistrationForm = () => {
 
   useEffect(() => {
     if (thirdPartyAuthApiStatus === COMPLETE_STATE) {
-      if (providers.length > 0 && socialAuthnButtonRef.current) {
+      if (providers.length > 0 && socialAuthnButtonRef.current && !focusedFieldRef.current) {
         socialAuthnButtonRef.current.focus();
-      } else if (emailRef.current) {
+      } else if (emailRef.current && !focusedFieldRef.current) {
         emailRef.current.focus();
       }
     } else if (thirdPartyAuthApiStatus === FAILURE_STATE) {
@@ -157,7 +158,7 @@ const RegistrationForm = () => {
     if (registrationError[name]) {
       dispatch(clearRegistrationBackendError(name));
     }
-    // seting marketingEmailsOptIn state for SSO authentication flow for register API call
+    // setting marketingEmailsOptIn state for SSO authentication flow for register API call
     if (name === 'marketingEmailsOptIn') {
       dispatch(setRegistrationFields({ [name]: value }));
     }
@@ -333,7 +334,13 @@ const RegistrationForm = () => {
                 context={{ provider: currentProvider, errorMessage: thirdPartyAuthErrorMessage }}
               />
             </div>
-            <Form id="registration-form" name="registration-form" className="d-flex flex-column my-4">
+            <Form
+              id="registration-form"
+              name="registration-form"
+              className="d-flex flex-column my-4"
+              onFocus={(e) => { focusedFieldRef.current = e.target; }}
+              onBlur={() => { focusedFieldRef.current = null; }}
+            >
               <EmailField
                 name="email"
                 value={formFields.email}