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

[Bug]: Menu scroll after navigation #2967

Closed
3 tasks done
nlueem opened this issue Jul 25, 2024 · 3 comments · Fixed by #2970 or #2951
Closed
3 tasks done

[Bug]: Menu scroll after navigation #2967

nlueem opened this issue Jul 25, 2024 · 3 comments · Fixed by #2970 or #2951
Labels
type: bug 🐛 Something isn't working

Comments

@nlueem
Copy link

nlueem commented Jul 25, 2024 •
edited by kyubisation
Loading

Preflight Checklist

Bug type

Functionality

It affects the following packages

Components

Which version of Lyne Components are you using

1.0.0

Operating system

Windows 10

Browser / Browser version

Microsoft Edge;v="126"

Input mode

Mouse/Keyboard

Additional settings

Angular 17.3

What happened?

When navigating via a link or button within the menu, the styles and the data-sbb-scroll-disabled attribute are not removed from the body element. The menu contains multiple sections.

Steps to reproduce the issue

  1. click on sbb-navigation-button:
<sbb-navigation trigger="menu-trigger" *transloco="let t">
  <sbb-navigation-marker>
    <sbb-navigation-button aria-current="page" id="menu-section-1">
      {{ t("menu.my-services.title") }}
    </sbb-navigation-button>
    <sbb-navigation-button id="nav-section-2"
      >{{ t("menu.my-data.title") }}
    </sbb-navigation-button>
    <sbb-navigation-link id="nav-section-3">
      {{ t("menu.authorization.title") }}
    </sbb-navigation-link>
  </sbb-navigation-marker>

  <sbb-navigation-section trigger="menu-section-1">
    <span slot="label">{{ t("menu.my-services.title") }}</span>
    <sbb-navigation-list>
      <span slot="label"></span>
      <sbb-navigation-button [routerLink]="['/services/ticket/damages']">
        {{ t("menu.my-services.damages-overview") }}
      </sbb-navigation-button>
      <sbb-navigation-button [routerLink]="['/services/ticket/overview']">
        {{ t("menu.my-services.tickets-overview") }}
      </sbb-navigation-button>
      <sbb-navigation-button [routerLink]="['/services/pinboard/overview']">
        {{ t("menu.my-services.pinboard") }}
      </sbb-navigation-button>
    </sbb-navigation-list>
  </sbb-navigation-section>
</sbb-navigation>
  1. inspect opened site

Relevant log output

<body data-sbb-scroll-disabled style="overflow: hidden; position: relative; margin-inline-end: 15px; --sbb-scrollbar-width: 15px;">, this part gets deleted when i just close the menu with the X-Button.
@nlueem nlueem added the type: bug 🐛 Something isn't working label Jul 25, 2024
@kyubisation
Copy link
Contributor

Hello @nlueem

I am not sure I fully understand you.
What you are describing seems to work fine with https://lyne-storybook.app.sbb.ch/iframe.html?args=&id=elements-sbb-navigation-sbb-navigation--with-navigation-section&viewMode=story
Can you maybe provide a working reproduction with e.g. StackBlitz?

@kyubisation kyubisation moved this from Funnel to To do in ESTA Web Lyne Design System Jul 25, 2024
@nlueem
Copy link
Author

nlueem commented Jul 25, 2024

https://github.com/nlueem/test-nav, hope this helps too? after navigating to target you should see that the style is still on the body-element.

@kyubisation
Copy link
Contributor

Ok, I see the problem.
Internally the problem is that the navigation is removed from the DOM before the animation event listener is called.
This is unexpected, because we don't expect the navigation to be removed from the DOM, but we should be able to fix this.

@kyubisation kyubisation mentioned this issue Jul 26, 2024
Merged
kyubisation added a commit that referenced this issue Jul 26, 2024
@kyubisation
fix(various): re-enable scrolling when disconnecting the component be…
76ef11b 
…fore animationend (#2970)

Currently if an overlay element is removed from the DOM before its `animationend` event is called, the page is stuck with disabled scrolling. To prevent this, we re-enable the scrolling additionally in the `disconnectedCallback`.

Closes #2967
@github-actions github-actions bot mentioned this issue Jul 26, 2024
Merged
This was referenced Nov 4, 2024
Closed
Closed
@github-actions github-actions bot mentioned this issue Dec 11, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
type: bug 🐛 Something isn't working
Projects
ESTA Web Lyne Design System
Archived in project
Milestone
No milestone
2 participants
@kyubisation @nlueem