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:
parent
3eda0c09cd
commit
b02fff63d0
|
@ -61,7 +61,7 @@ export class Container extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
scrollToHash () {
|
scrollToHash () {
|
||||||
const { hash } = this.props
|
const { hash } = this.context._containerProps
|
||||||
if (!hash) return
|
if (!hash) return
|
||||||
|
|
||||||
const el = document.getElementById(hash)
|
const el = document.getElementById(hash)
|
||||||
|
@ -73,8 +73,7 @@ export class Container extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const {children} = this.props
|
return this.props.children
|
||||||
return <>{children}</>
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -53,6 +53,7 @@ export default class extends Component {
|
||||||
Counter: {counter}
|
Counter: {counter}
|
||||||
</div>
|
</div>
|
||||||
<button id='increase' onClick={() => this.increase()}>Increase</button>
|
<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>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -248,7 +248,7 @@ export default (context, render) => {
|
||||||
browser.close()
|
browser.close()
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should scroll to the specified position', async () => {
|
it('should scroll to the specified position on the same page', async () => {
|
||||||
let browser
|
let browser
|
||||||
try {
|
try {
|
||||||
browser = await webdriver(context.appPort, '/nav/hash-changes')
|
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', () => {
|
describe('when hash change via A tag', () => {
|
||||||
|
|
Loading…
Reference in a new issue