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 () {
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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', () => {
|
||||
|
|
Loading…
Reference in a new issue