Router/PageLoader: Scroll Position is maintained on navigate when PageLoader does not "reload" content

As part of Issue https://github.com/redwoodjs/redwood/pull/1284 to correct the “reload flash” when navigating via Router Links, a decision needs to be made as to how to handle the window’s Scroll Postition.

With change to the Router, the window position is maintained.

This means:

• Page A - Scroll 2-3 vertical screen heights
• Navigate to Page B (that also has multiple page screen height)
• You are now on Page B but at the Position of A (ie, not top)

There is discussion with React Router w/ re: to Scroll Position and Restoration here:

https://reactrouter.com/web/guides/scroll-restoration

as well as part of browser history spec:

https://majido.github.io/scroll-restoration-proposal/history-based-api.html#web-idl

In React Router, they have a component that scrolls to top by setting the window.scrollTo(0, 0):

class ScrollToTop extends React.Component {
  componentDidUpdate(prevProps) {
    if (
      this.props.location.pathname !== prevProps.location.pathname
    ) {
      window.scrollTo(0, 0);
    }
  }

  render() {
    return null;
  }
}

Perhaps this rule (or option) could be added to the PageLoader – perhaps even as a Page or Route option to either a) always scroll to top or b) only scroll to top it the option is set.

[dthyresson]

since I’m doing focus management as well

@jtoar I looked at an older app and realized we had done something really similar to the window.scrollTo for focus:

const Page = ({ children, location }) => {
...
  const node = useRef();

  useEffect(() => {
    node.current.focus();
  }, [location.key]);

I cannot remember exactly what location was … but what I do recall seeing from time to time was some some of timing 😃 issue when setting focus happened perhaps when the input wasn’t 100% ready (this was a year or so ago for this app).

Perhaps, the timing and some defensive programming to ensure the element is ready can help.

[jtoar]

Awesome discussion and great resources! Just wanted to chime in and say that I can take the lead on this since I’m doing focus management as well.