Fix scroll error for older browsers. (#235)

Check if scrollBehavior is supported otherwise fallback to two arguments
window.scrollTo(x-coord, y-coord).

VAN-439

src/data/utils/dataUtils.js

@@ -68,3 +68,13 @@ export const getActivationStatus = () => {
 
   return params.account_activation_status;
 };
+
+export const isScrollBehaviorSupported = () => 'scrollBehavior' in document.documentElement.style;
+
+export const windowScrollTo = (options) => {
+  if (isScrollBehaviorSupported()) {
+    return window.scrollTo(options);
+  }
+
+  return window.scrollTo(options.top, options.left);
+};

src/data/utils/index.js

@@ -5,5 +5,6 @@ export {
   updatePathWithQueryParams,
   getAllPossibleQueryParam,
   getActivationStatus,
+  windowScrollTo,
 } from './dataUtils';
 export { default as AsyncActionType } from './reduxUtils';

src/forgot-password/ForgotPasswordPage.jsx

@@ -28,7 +28,7 @@ import {
 import APIFailureMessage from '../common-components/APIFailureMessage';
 import { INTERNAL_SERVER_ERROR, LOGIN_PAGE, VALID_EMAIL_REGEX } from '../data/constants';
 import LoginHelpLinks from '../login/LoginHelpLinks';
-import { updatePathWithQueryParams } from '../data/utils';
+import { updatePathWithQueryParams, windowScrollTo } from '../data/utils';
 
 const ForgotPasswordPage = (props) => {
   const { intl, status } = props;
@@ -76,7 +76,7 @@ const ForgotPasswordPage = (props) => {
         const validationMessage = getValidationMessage(values.email);
 
         if (validationMessage !== '') {
-          window.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
+          windowScrollTo({ left: 0, top: 0, behavior: 'smooth' });
           return { email: validationMessage };
         }
 

src/login/LoginPage.jsx

@@ -33,7 +33,7 @@ import {
 } from '../data/constants';
 import { forgotPasswordResultSelector } from '../forgot-password';
 import {
-  getTpaProvider, getTpaHint, updatePathWithQueryParams, getAllPossibleQueryParam, getActivationStatus,
+  getTpaProvider, getTpaHint, updatePathWithQueryParams, getAllPossibleQueryParam, getActivationStatus, windowScrollTo,
 } from '../data/utils';
 
 class LoginPage extends React.Component {
@@ -190,7 +190,7 @@ class LoginPage extends React.Component {
                 />
               )}
               {this.props.loginError ? <LoginFailureMessage loginError={this.props.loginError} /> : null}
-              {submitState === DEFAULT_STATE && this.state.isSubmitted ? window.scrollTo({ left: 0, top: 0, behavior: 'smooth' }) : null}
+              {submitState === DEFAULT_STATE && this.state.isSubmitted ? windowScrollTo({ left: 0, top: 0, behavior: 'smooth' }) : null}
               {activationMsgType && <AccountActivationMessage messageType={activationMsgType} />}
               {this.props.forgotPassword.status === 'complete' && !this.props.loginError ? (
                 <ConfirmationAlert email={this.props.forgotPassword.email} />

src/register/RegistrationFailure.jsx

@@ -7,6 +7,7 @@ import { Alert } from '@edx/paragon';
 import { FORBIDDEN_REQUEST, INTERNAL_SERVER_ERROR } from './data/constants';
 import messages from './messages';
 import { DEFAULT_STATE, PENDING_STATE } from '../data/constants';
+import { windowScrollTo } from '../data/utils';
 
 const RegistrationFailureMessage = (props) => {
   const errorMessage = props.errors;
@@ -15,7 +16,7 @@ const RegistrationFailureMessage = (props) => {
 
   useEffect(() => {
     if (props.isSubmitted && props.submitButtonState !== PENDING_STATE) {
-      window.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
+      windowScrollTo({ left: 0, top: 0, behavior: 'smooth' });
     }
   });
 

src/reset-password/ResetPasswordPage.jsx

@@ -22,6 +22,7 @@ import {
 } from '../common-components';
 import Spinner from './Spinner';
 import { API_RATELIMIT_ERROR, INTERNAL_SERVER_ERROR } from '../data/constants';
+import { windowScrollTo } from '../data/utils';
 
 const ResetPasswordPage = (props) => {
   const { intl } = props;
@@ -81,7 +82,7 @@ const ResetPasswordPage = (props) => {
   const handleSubmit = (e) => {
     e.preventDefault();
 
-    window.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
+    windowScrollTo({ left: 0, top: 0, behavior: 'smooth' });
     if (newPasswordInput === '') {
       setPasswordValidValue(false);
       setvalidationMessage(intl.formatMessage(messages['reset.password.empty.new.password.field.error']));