diff --git a/packages/volto/news/6523.internal b/packages/volto/news/6523.internal new file mode 100644 index 0000000000..81d4a50ae7 --- /dev/null +++ b/packages/volto/news/6523.internal @@ -0,0 +1 @@ +Disable initial scroll to top after SSR completion. @Faakhir30 diff --git a/packages/volto/src/helpers/ScrollToTop/ScrollToTop.jsx b/packages/volto/src/helpers/ScrollToTop/ScrollToTop.jsx index 8122fbea63..e938912c05 100644 --- a/packages/volto/src/helpers/ScrollToTop/ScrollToTop.jsx +++ b/packages/volto/src/helpers/ScrollToTop/ScrollToTop.jsx @@ -10,6 +10,12 @@ import config from '@plone/volto/registry'; * @extends {Component} */ class ScrollToTop extends React.Component { + constructor(props) { + super(props); + this.isClientSide = false; + this.isFirstClientUpdatePending = true; + } + /** * Property types. * @property {Object} propTypes Property types. @@ -22,12 +28,30 @@ class ScrollToTop extends React.Component { children: PropTypes.node.isRequired, }; + /** + * Used to indicate client-side rendering + * @memberof ScrollToTop + */ + componentDidMount() { + this.isClientSide = true; + } + /** * @param {*} prevProps Previous Props * @returns {null} Null * @memberof ScrollToTop */ componentDidUpdate(prevProps) { + // avoid scrollToTop during SSR + if (!this.isClientSide) { + return; + } + // Skip the first client-side update that happens right after hydration + if (this.isFirstClientUpdatePending) { + this.isFirstClientUpdatePending = false; + return; + } + const { location } = this.props; const noInitialBlocksFocus = // Do not scroll on /edit config.blocks?.initialBlocksFocus === null