[added] <Route ignoreScrollBehavior /> to opt out of scroll behavior for itself and descendants

[gaearon]

This PR adds ignoreScrollBehavior on Route component as discussed in #326.

It seems to work on my project but I'd like to hear your opinions on how I should approach testing.
Should I unit-test Routes, ScrollContext, or what?

---

If you specify ignoreScrollBehavior on a route, scroll behavior will not be triggered when transitioning within that route. It will, however, be triggered when transitioning outside this route. This allows us to support a variety of scenarios where you might want scroll behavior to be ignored:

• Searching, where path is updated every time you change a query
• Tabs, where you'd rather not scroll to top when switching between them

In the first case, by specifying ignoreScrollBehavior on search route we ensure that transitions from search to search (which is what happens when you type a search query) will not trigger scroll behavior, but transitions from search to home and back will.

In the second case, by specifying ignoreScrollBehavior on home parent route, we say transitions within home (e.g. from feed to discover and back) don't trigger scroll behavior. However if you go from feed to about, scroll behavior will be respected.

<Routes location="history">
  <Route handler={App}>
    <Route name="home" path="/" handler={HomePage}
           ignoreScrollBehavior>
      <Route name="feed" path="/" handler={FeedPage} />
      <Route name="discover" path="/discover" handler={DiscoverPage} />
    </Route>
    <Route name="search" path="/search" handler={SearchResultsPage}
           ignoreScrollBehavior />
    <Route name="about" path="/about" handler={AboutPage} />
  </Route>
</Routes>

(I'll draw a better picture later :-)

By default, scroll behavior is performed on all transitions (red arrows). Routes can create “scrolling realms” for themselves and their descendants by specifying ignoreScrollBehavior (purple areas). Transitions that are fully confined to a single scrolling realm, don't have any scroll behavior performed (blue arrows). If transition is not fully confined to a scrolling realm, scrollBehavior of Routes is respected.

[ryanflorence]

I refuse to accept a "better" picture

On Saturday, October 11, 2014, Dan Abramov notifications@github.com wrote:

This PR adds ignoreScrollBehavior on Route component as discussed
#326 (comment) in
#326 #326.

It seems to work on my project but I'd like to hear your opinions on how
I should approach testing.

Should I unit-test Routes, ScrollContext, or what?

If you specify ignoreScrollBehavior on a route, scroll behavior will not
be triggered when transitioning within that route. It will, however,
be triggered when transitioning outside this route. This allows us to
support a variety of scenarios where you might want scroll behavior to be
ignored:

• Searching, where path is updated every time you change a query
• Tabs, where you'd rather not scroll to top when switching between
  them

In the first case, by specifying ignoreScrollBehavior on search route we
ensure that transitions from search to search (which is what happens when
you type a search query) will not trigger scroll behavior, but
transitions from search to home and back will.

In the second case, by specifying ignoreScrollBehavior on home parent
route, we say transitions within home (e.g. from feed to discover and
back) don't trigger scroll behavior. However if you go from feed to about,
scroll behavior will be respected.

(I'll draw a better picture later :-)

https://cloud.githubusercontent.com/assets/810438/4585743/db9431f0-500a-11e4-9a47-b56116e28cf6.jpg

By default, scroll behavior is performed on all transitions (red arrows).
Routes can create “scrolling realms” for themselves and their descendants
by specifying ignoreScrollBehavior (purple areas). Transitions that are
fully confined to a single scrolling realm, don't have any scroll behavior
performed (blue arrows). If transition is not fully confined to a scrolling

realm, scrollBehavior of Routes is respected.

You can merge this Pull Request by running

git pull https://github.com/gaearon/react-router noScroll

Or view, comment on, or merge it at:

#388
Commit Summary

• [added] to opt out of scroll behavior
  for itself and descendants

File Changes

• M modules/components/Route.js
  https://github.com/rackt/react-router/pull/388/files#diff-0 (3)
• M modules/components/Routes.js
  https://github.com/rackt/react-router/pull/388/files#diff-1 (21)

Patch Links:

• https://github.com/rackt/react-router/pull/388.patch
• https://github.com/rackt/react-router/pull/388.diff

—
Reply to this email directly or view it on GitHub
#388.

[gaearon]

🎨

[mjackson]

I think the best way to test this would be to stub out the updateScroll method and make sure it's called/not called as you expect it to be.

For example, you could setup your routes exactly as you have them here, start at the feed, transition to discover, and make sure that updateScroll wasn't called in the transition. Likewise, you could have another test that starts at discover and transitions to search and assert that updateScroll was indeed called. The actual scroll position should be outside the scope of the test as it doesn't really matter.

[gaearon]

@mjackson I added some tests, are they OK?

[ryanflorence]

@mjackson this looks good to me, you 👍 ?

[mjackson]

Thanks @gaearon ! Looks great.

[iamrandys]

Thanks @gaearon ! You're way too fast! I was going to start working on this, and found it is already done! Looks like I have some time now, if anything else needs to be done.