diff --git a/src/data/utils/dataUtils.js b/src/data/utils/dataUtils.js index 52830137..b61a4d20 100644 --- a/src/data/utils/dataUtils.js +++ b/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); +}; diff --git a/src/data/utils/index.js b/src/data/utils/index.js index 261839a2..55710159 100644 --- a/src/data/utils/index.js +++ b/src/data/utils/index.js @@ -5,5 +5,6 @@ export { updatePathWithQueryParams, getAllPossibleQueryParam, getActivationStatus, + windowScrollTo, } from './dataUtils'; export { default as AsyncActionType } from './reduxUtils'; diff --git a/src/forgot-password/ForgotPasswordPage.jsx b/src/forgot-password/ForgotPasswordPage.jsx index 7cb1ab8d..7d8d2c5b 100644 --- a/src/forgot-password/ForgotPasswordPage.jsx +++ b/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 }; } diff --git a/src/login/LoginPage.jsx b/src/login/LoginPage.jsx index e36828ae..25379a4c 100644 --- a/src/login/LoginPage.jsx +++ b/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 ? : 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 && } {this.props.forgotPassword.status === 'complete' && !this.props.loginError ? ( diff --git a/src/register/RegistrationFailure.jsx b/src/register/RegistrationFailure.jsx index 13eb6b02..45edb90e 100644 --- a/src/register/RegistrationFailure.jsx +++ b/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' }); } }); diff --git a/src/reset-password/ResetPasswordPage.jsx b/src/reset-password/ResetPasswordPage.jsx index 57ca0969..923fe528 100644 --- a/src/reset-password/ResetPasswordPage.jsx +++ b/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']));