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

Tabmenu with routerLink items doesn't show offscreen item when reloaded #11411

Closed
Jonnyprof opened this issue Apr 12, 2022 · 0 comments · Fixed by #11488
Closed

Tabmenu with routerLink items doesn't show offscreen item when reloaded #11411

Jonnyprof opened this issue Apr 12, 2022 · 0 comments · Fixed by #11488
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@Jonnyprof
Copy link

I'm submitting a ... (check one with "x")

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
https://stackblitz.com/edit/github-faf8r7-qpm6nh

Current behavior
If you have a tabmenu component set as [scrollable]="true" and go to a "hidden" item scrolling. When you refresh the page the selected item is not shown, you have to scroll and you don't know the current page.

Expected behavior
You should see the selected item when reload page.

Minimal reproduction of the problem with instructions
Set your browser as mobile device and go to https://github-faf8r7-qpm6nh.stackblitz.io/about. This selects correctly the about menuItem, but is hidden by the scrolling.

Possible solution
Call updateScrollBar on ngAfterViewInit method.

updateScrollBar(index) {
let tabHeader = this.navbar.nativeElement.children[index];
tabHeader.scrollIntoView({ block: 'nearest' })
}

What is the motivation / use case for changing the behavior?
Tabmenu doesn't show current page and it's confusing.

Please tell us about your environment:
Ubuntu 20.04.4 LTS

  • Angular version: 5.X
    13.3.2

  • PrimeNG version: 5.X
    13.3.2

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
    All browsers

  • Language: [all | TypeScript X.X | ES6/7 | ES5]
    All

volvachev added a commit to volvachev/primeng that referenced this issue May 6, 2022
volvachev added a commit to volvachev/primeng that referenced this issue May 6, 2022
volvachev added a commit to volvachev/primeng that referenced this issue May 6, 2022
@cetincakiroglu cetincakiroglu added this to the 13.4.2 milestone Jun 7, 2022
@cetincakiroglu cetincakiroglu added the Type: Bug Issue contains a bug related to a specific component. Something about the component is not working label Jun 7, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
2 participants