[go: up one dir, main page]

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.

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

fix(nuxt): await page:finish hook on page enter with a hash link in scrollBehavior #28997

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

DamianGlowala
Copy link
Member

🔗 Linked issue

resolves #28992

📚 Description

With ssr:false and page enter/refresh containing a hash link, we weren't awaiting the page:finish hook. This caused _getHashElementScrollMarginTop to execute const elem = document.querySelector(selector) too early and return null.

Copy link
stackblitz bot commented Sep 14, 2024

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@@ -28,26 +28,27 @@ export default <RouterConfig> {
}

// Hash routes on the same page, no page hook is fired so resolve here
if (to.path === from.path) {
if (from.hash && !to.hash) {
if (to.path === from.path && !to.hash) {
Copy link
Member

Choose a reason for hiding this comment

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

should we check like this?

Suggested change
if (to.path === from.path && !to.hash) {
if (to.path === from.path && (!to.hash || (to.hash !== from.hash))) {

Copy link
Member Author
@DamianGlowala DamianGlowala Sep 14, 2024

Choose a reason for hiding this comment

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

Wanted to list each case, which might help decide:

  • from.hash && !to.hash --> { left: 0, top: 0 }
  • !from.hash && to.hash --> { el: to.hash, top: _getHashElementScrollMarginTop(to.hash), behavior }
  • !from.hash && !to.hash --> false (no change)
  • from.hash && to.hash --> false (no change)

Out of all 4, we don't want to satisfy the second bullet point; the inverse would be:

Suggested change
if (to.path === from.path && !to.hash) {
if (to.path === from.path && (!to.hash || from.hash)) {

What do you think?

Copy link
Member

Choose a reason for hiding this comment

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

Feels like we need a unit test covering the range of behaviours here.

It feels like the logic here isn't quite right, but I might be wrong

Copy link

Choose a reason for hiding this comment

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

Hello, don't want to rush you, but do we have any eta for this? I have used hash based navigation in a few places in my project.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Hash route links not working with ssr:false
3 participants