p-tab: Controlled Tab Index does not scroll to active index when scrollable is true

[ysk3a]

Describe the bug

In version 17 there is event outputs which can be listened to. In Version 18, 19 and 20 there are no more event under the api section of the documentation.

So I attempted a work around using model signals to combine https://primeng.org/tabs#controlled and https://primeng.org/tabs#scrollable resulting in https://stackblitz.com/edit/gva4t3ds for a make shift scrollto feature but that does not seem to work.

It "scrolls to" somewhere but doesn't actually scroll to the active tab and make the tab visible.

In Version 17, the scrollto worked out of the box but suddenly later versions don't have this feature. See v17: https://stackblitz.com/edit/gf5m1jmb VS v20: https://stackblitz.com/edit/gva4t3ds

Pull Request Link

No response

Reason for not contributing a PR

• [ ] Lack of time
• [x] Unsure how to implement the fix/feature
• [x] Difficulty understanding the codebase
• [ ] Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/gva4t3ds

Environment

Windows 10, Chrome

Angular version

20

PrimeNG version

v20

Node version

No response

Browser(s)

Chrome

Steps to reproduce the behavior

1. Open Stackblitz: https://stackblitz.com/edit/gf5m1jmb VS https://stackblitz.com/edit/gva4t3ds
2. Click on the Go To button.
3. notice that in v17, it scrolls properly to the active tab and shows it in view but in v20 there is no scrollto feature and my attempts to adding the scrollto logic does not properly scrollto the correct tab nor show the active tab in view.

Expected behavior

ScrollTo (controlled with scrollable) should work like v17 in v20 and show the active tab into view once scrolled to.

[danielxbauer]

It does seem like the "auto scroll to" function when setting the activeIndex is broken in the tabs component.

I investigated the bug a bit: Inside tab.ts It seems like the changeFocusedTab function is not called when the active property changes. The scroll to works while using keyboard (e.g. arrow keys or home (pos1)/end keys).

Quick Fix

@ysk3a About your provided code (v20): The scrollToActiveTab is acting weird as the '.p-tab.p-tab-active' is not available instantly. So as a quick fix you could do following:

scrollToActiveTab() {
    setTimeout(() => { // <-- Put the whole function inside this timeout block
      const activeTabElement = this.tabView.el.nativeElement.querySelector('.p-tab.p-tab-active');

      if (activeTabElement) {
        activeTabElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
      }
    }, 0);
}

Of course this is a dirty workaround and it should be bug fixed but for now this would work.

[ysk3a]

@danielxbauer Thanks for the suggestion. Yeah it does seem like a dirty workaround.

Until there is an official fix, I wonder if there is a way to be reactive when class of an elements change without needing settimeout. The only way I can think of right now is maybe making the code a bit complicated by adding mutationobserver?