1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00

Fix broken hash scroll logic (#4766)

`<Container>` does not receive any property. There is no way the *scrollToHash* logic can work right now. I believe it's a regression. It was working fine at some point. I'm sorry, I'm too lazy to add a test.

This fix was tested on Material-UI 👌.

This bug reproduction is the following:
As soon as you want to transition to a new page with a hash. The scroll doesn't change.
- start on pageA
- you scrollTop to 100
- you move to pageB#hash
- you stay at scrollTop 100, but #hash is at scrollTop 400.
This commit is contained in:
Olivier Tassinari 2018-08-11 22:04:16 +02:00 committed by Tim Neutkens
parent 3eda0c09cd
commit b02fff63d0
3 changed files with 23 additions and 4 deletions

View file

@ -61,7 +61,7 @@ export class Container extends Component {
}
scrollToHash () {
const { hash } = this.props
const { hash } = this.context._containerProps
if (!hash) return
const el = document.getElementById(hash)
@ -73,8 +73,7 @@ export class Container extends Component {
}
render () {
const {children} = this.props
return <>{children}</>
return this.props.children
}
}

View file

@ -53,6 +53,7 @@ export default class extends Component {
Counter: {counter}
</div>
<button id='increase' onClick={() => this.increase()}>Increase</button>
<Link href='/nav/hash-changes#item-400'><a id='scroll-to-hash'>Scroll to hash</a></Link>
</div>
)
}

View file

@ -248,7 +248,7 @@ export default (context, render) => {
browser.close()
})
it('should scroll to the specified position', async () => {
it('should scroll to the specified position on the same page', async () => {
let browser
try {
browser = await webdriver(context.appPort, '/nav/hash-changes')
@ -272,6 +272,25 @@ export default (context, render) => {
}
}
})
it('should scroll to the specified position to a new page', async () => {
let browser
try {
browser = await webdriver(context.appPort, '/nav')
// Scrolls to item 400 on the page
await browser
.elementByCss('#scroll-to-hash').click()
.waitForElementByCss('#hash-changes-page')
const scrollPosition = await browser.eval('window.pageYOffset')
expect(scrollPosition).toBe(7258)
} finally {
if (browser) {
browser.close()
}
}
})
})
describe('when hash change via A tag', () => {