diff --git a/assets/js/src/common/scroll_to_top.jsx b/assets/js/src/common/scroll_to_top.jsx new file mode 100644 index 0000000000..24d5741648 --- /dev/null +++ b/assets/js/src/common/scroll_to_top.jsx @@ -0,0 +1,12 @@ +import { useEffect } from 'react'; +import { withRouter } from 'react-router-dom'; + +const ScrollToTop = ({ children, location: { pathname } }) => { + useEffect(() => { + window.scrollTo(0, 0); + }, [pathname]); + + return children || null; +}; + +export default withRouter(ScrollToTop); diff --git a/assets/js/src/subscribers/importExport/import.jsx b/assets/js/src/subscribers/importExport/import.jsx index 84daa1a93b..f2c6679f56 100644 --- a/assets/js/src/subscribers/importExport/import.jsx +++ b/assets/js/src/subscribers/importExport/import.jsx @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'; import { HashRouter, Switch, Route, Redirect, } from 'react-router-dom'; +import ScrollToTop from 'common/scroll_to_top.jsx'; import StepMethodSelection from './import/step_method_selection.jsx'; import StepInputValidation from './import/step_input_validation.jsx'; @@ -18,57 +19,59 @@ const ImportSubscribers = () => { const [stepDataManipulationData, setStepDataManipulationData] = useState({}); return ( - - ( - - )} - /> - ( - - )} - /> - ( - - )} - /> - ( - - )} - /> - } - /> - + + + ( + + )} + /> + ( + + )} + /> + ( + + )} + /> + ( + + )} + /> + } + /> + + ); }; diff --git a/assets/js/src/subscribers/importExport/import/step_input_validation.jsx b/assets/js/src/subscribers/importExport/import/step_input_validation.jsx index 4ab651ac51..04211671e5 100644 --- a/assets/js/src/subscribers/importExport/import/step_input_validation.jsx +++ b/assets/js/src/subscribers/importExport/import/step_input_validation.jsx @@ -13,7 +13,7 @@ function StepInputValidation({ stepMethodSelectionData, history }) { useEffect( () => { - if (stepMethodSelectionData === 'undefined') { + if (stepMethodSelectionData === undefined) { history.replace('step_method_selection'); } },