Router: Focus and scroll on long content

[drewhamlett]

First of all thanks fort his library. Really a breath of fresh air coming from React Router.

I'm having an issue that's not really a bug per say but a combination of the focus for accessibility and how the browser behaves. In this example with a sub router the focus changes and you jump to the content. It only happens when there is content that scrolls it seems. Ex: go to dashboard and team, but then go to projects and it doesn't happen

https://codesandbox.io/s/x8z5v3vxo
https://x8z5v3vxo.codesandbox.io/dashboard/team

It's kind of an odd behavior and I didn't know if there were plans on managing this. I see there is PR open for focus and modals.

[ryanflorence]

Huh ... yeah this is just how browsers behave, basically it does something like "scrollIntoView" of the focused element, if the body isn't large enough, it can't scroll.

I admit it's probably a little surprising to some folks, but that's what anchor links do too, so it seems ... fine?

Going to close this since there's no bug, it's just browser behavior. You can manage the scroll position if you want in cDM to avoid it.

https://codesandbox.io/s/92y1w4vx44
https://92y1w4vx44.codesandbox.io

class ScrollUp extends React.Component {
  componentDidMount() {
    requestAnimationFrame(() => {
      window.scrollTo(0, 0);
    });
  }

  render() {
    return this.props.children;
  }
}

const Team = () => (
  <ScrollUp>
    <div>{/* ... */}</div>
  </ScrollUp>
)

[drewhamlett]

Thanks for your help! Yea not really a bug just kind of thrown off by it.

[Hurtak]

@ryanflorence what is the reason to use requestAnimationFrame along with scrollTo?

[ghost]

I'd like to share our approach here, where we deal with automatic scroll handling and interact well with the browsers native recovery mechanism when navigating with back/forward buttons.

https://gist.github.com/swernerx/2c2ba4e611b4ec7921813a71517ddf5a

[mnpenner]

I don't think I like either of these solutions. For a tab-based view, it shouldn't scroll at all. Neither up to the top of the page, nor down to the tab content. Is there no way to disable this scrolling?

[marcjkeppler]

I've run into this same issue of the page scrolling on navigation to a new view. Could we get some re-consideration on the matter?

There is a preventScroll option that can be passed to focus() calls to prevent this from happening:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

I almost wonder if preventing scroll should be the default behavior for this library. I'm not sure I'd expect a routing library to scroll the page, although it is nice to focus for accessibility purposes.

I'd be happy to submit a PR if you're open to the idea. @ryanflorence