Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allow scroll-to-top with shallow routing #21630

Closed
wants to merge 4 commits into from
Closed

Allow scroll-to-top with shallow routing #21630

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
344eb54
Allow scroll for shallow links
ekratskih Jan 28, 2021
11a7f91
Simplify the code
ekratskih Feb 2, 2021
639b376
Merge branch 'canary' into fix/scroll-shallow
ekratskih Feb 2, 2021
fbc981c
Update router.ts
ekratskih Feb 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 2 additions & 6 deletions packages/next/next-server/lib/router/router.ts
View file
Open in desktop
Expand Up @@ -757,7 +757,7 @@ export default class Router implements BaseRouter {
// Default to scroll reset behavior unless explicitly specified to be
// `false`! This makes the behavior between using `Router#push` and a
// `<Link />` consistent.
options.scroll = !!(options.scroll ?? true)
options.scroll = !!(options.scroll ?? (options.shallow ? false : true))
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Disable scroll for shallow links by default. Related to this change: #21437


let localeChange = options.locale !== this.locale

Expand Down Expand Up @@ -1093,16 +1093,13 @@ export default class Router implements BaseRouter {
!(routeInfo.Component as any).getInitialProps
}

// shallow routing is only allowed for same page URL changes.
const isValidShallowRoute = options.shallow && this.route === route
await this.set(
route,
pathname!,
query,
cleanedAs,
routeInfo,
forcedScroll ||
(isValidShallowRoute || !options.scroll ? null : { x: 0, y: 0 })
forcedScroll || (options.scroll ? { x: 0, y: 0 } : null)
).catch((e) => {
if (e.cancelled) error = error || e
else throw e
Expand Down Expand Up @@ -1327,7 +1324,6 @@ export default class Router implements BaseRouter {
resetScroll: { x: number; y: number } | null
): Promise<void> {
this.isFallback = false

this.route = route
this.pathname = pathname
this.query = query
Expand Down
9 changes: 9 additions & 0 deletions test/integration/client-navigation/pages/nav/shallow-routing.js
View file
Open in desktop
Expand Up @@ -27,6 +27,12 @@ export default class extends Component {
Router.push(href, href, { shallow: true })
}

increaseWithScroll() {
const counter = this.getCurrentCounter()
const href = `/nav/shallow-routing?counter=${counter + 1}`
Router.push(href, href, { shallow: true, scroll: true })
}

increaseNonShallow() {
const counter = this.getCurrentCounter()
const href = `/nav/shallow-routing?counter=${counter + 1}`
Expand Down Expand Up @@ -58,6 +64,9 @@ export default class extends Component {
<button id="increase2" onClick={() => this.increaseNonShallow()}>
Increase Non-Shallow
</button>
<button id="increase3" onClick={() => this.increaseWithScroll()}>
Increase With Scroll
</button>
<button id="invalidShallow" onClick={() => this.gotoNavShallow()}>
Invalid Shallow Nav
</button>
Expand Down
15 changes: 14 additions & 1 deletion test/integration/client-navigation/test/index.test.js
View file
Open in desktop
Expand Up @@ -899,11 +899,24 @@ describe('Client Navigation', () => {

expect(scrollPositionDown).toBeGreaterThan(3000)

await browser.elementByCss('#invalidShallow').click()
await browser.elementByCss('#increase3').click()
await waitFor(500)
const newScrollPosition3 = await browser.eval('window.pageYOffset')

expect(newScrollPosition3).toBe(0)

await browser.eval(() =>
document.querySelector('#increase3').scrollIntoView()
)
const scrollPositionDown2 = await browser.eval('window.pageYOffset')

expect(scrollPositionDown2).toBeGreaterThan(3000)

await browser.elementByCss('#invalidShallow').click()
await waitFor(500)
const newScrollPosition4 = await browser.eval('window.pageYOffset')

expect(newScrollPosition4).toBe(0)
})
})

Expand Down