fix: fix scroll issues (#99)

Description: Fix scroll issues on login, register and PP pages VAN-1995 Co-authored-by: Ahtesham Quraish <[email protected]>
edx · Jul 2, 2024 · 5c6b646 · 5c6b646
1 parent fbee498
commit 5c6b646
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 12 deletions.
diff --git a/src/data/utils.js b/src/data/utils.js
@@ -55,7 +55,7 @@ export const getCountryCookieValue = () => {
 
 export const moveScrollToTop = (ref) => {
   if (ref?.current?.scrollIntoView) {
-    ref.current.scrollIntoView({ behavior: 'smooth', block: 'end' });
+    ref.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
   }
 };
 

diff --git a/src/forms/login-popup/index.jsx b/src/forms/login-popup/index.jsx
@@ -26,7 +26,7 @@ import {
   TPA_AUTHENTICATION_FAILURE,
 } from '../../data/constants';
 import { useDispatch, useSelector } from '../../data/storeHooks';
-import getAllPossibleQueryParams from '../../data/utils';
+import getAllPossibleQueryParams, { moveScrollToTop } from '../../data/utils';
 import {
   trackForgotPasswordLinkClick, trackLoginPageViewed, trackLoginSuccess, trackRegisterFormToggled,
 } from '../../tracking/trackers/login';
@@ -53,6 +53,7 @@ const LoginForm = () => {
 
   const emailOrUsernameRef = useRef(null);
   const socialAuthnButtonRef = useRef(null);
+  const errorAlertRef = useRef(null);
 
   const loginResult = useSelector(state => state.login.loginResult);
   const loginErrorCode = useSelector(state => state.login.loginError?.errorCode);
@@ -183,6 +184,9 @@ const LoginForm = () => {
     if (validationErrors.emailOrUsername || validationErrors.password) {
       setFormErrors({ ...validationErrors });
       setErrorCode({ type: INVALID_FORM, context: {} });
+      if (moveScrollToTop) {
+        moveScrollToTop(errorAlertRef);
+      }
       return;
     }
 
@@ -222,10 +226,12 @@ const LoginForm = () => {
           </div>
         </>
       )}
-      <LoginFailureAlert
-        errorCode={errorCode.type}
-        context={errorCode.context}
-      />
+      <div ref={errorAlertRef}>
+        <LoginFailureAlert
+          errorCode={errorCode.type}
+          context={errorCode.context}
+        />
+      </div>
       {showResetPasswordSuccessBanner && <ResetPasswordSuccess />}
       <ThirdPartyAuthAlert
         currentProvider={currentProvider}

diff --git a/src/forms/progressive-profiling-popup/index.jsx b/src/forms/progressive-profiling-popup/index.jsx
@@ -48,7 +48,7 @@ const ProgressiveProfilingForm = () => {
   const { formatMessage } = useIntl();
   const dispatch = useDispatch();
 
-  const progressiveProfilingHeadingRef = useRef(null);
+  const countryFieldRef = useRef(null);
 
   const countryCookieValue = getCountryCookieValue();
   const countryList = useMemo(() => getCountryList(getLocale()), []);
@@ -137,7 +137,7 @@ const ProgressiveProfilingForm = () => {
     e.preventDefault();
 
     if (hasFormErrors()) {
-      moveScrollToTop(progressiveProfilingHeadingRef);
+      moveScrollToTop(countryFieldRef);
       return;
     }
     const eventProperties = {
@@ -177,14 +177,14 @@ const ProgressiveProfilingForm = () => {
     if (hasFormErrors() && !hasCountry) {
       setFormErrors({ ...formErrors, country: formatMessage(messages.progressiveProfilingCountryFieldErrorMessage) });
       setSkipButtonState(FAILURE_STATE);
-      moveScrollToTop(progressiveProfilingHeadingRef);
+      moveScrollToTop(countryFieldRef);
     } else if (!hasFormErrors() && !hasCountry) {
       setFormErrors({
         ...formErrors,
         country: formatMessage(messages.progressiveProfilingCountryFieldBlockingErrorMessage),
       });
       setSkipButtonState(FAILURE_STATE);
-      moveScrollToTop(progressiveProfilingHeadingRef);
+      moveScrollToTop(countryFieldRef);
     } else if (hasCountry) {
       // link tracker
       trackProgressiveProfilingSkipLinkClick(redirectUrl)(e);
@@ -202,7 +202,6 @@ const ProgressiveProfilingForm = () => {
       <h1
         className="display-1 font-italic text-center mb-4"
         data-testid="progressive-profiling-heading"
-        ref={progressiveProfilingHeadingRef}
       >
         {formatMessage(messages.progressiveProfilingFormHeading)}
       </h1>
@@ -214,7 +213,10 @@ const ProgressiveProfilingForm = () => {
         <h3 className="mb-2.5 mt-2">
           {formatMessage(messages.progressiveProfilingCountryFieldTitle)}
         </h3>
-        <p className="x-small">
+        <p
+          className="x-small"
+          ref={countryFieldRef}
+        >
           {formatMessage(messages.progressiveProfilingCountryFieldInfoMessage)}
         </p>
         <Form.Group controlId="country" className="mb-4.5">