p-tabs scrollable should jump to active tab on state change

[wuwu2000]

Describe the bug

If you have many tabs and use scrollable p-tabs should jump automatically to the correct tabs position if the newly selected tab is not visible at the moment.

Here is an example to reproduce:

<div class="card" style="width: 300px">
  <div class="flex mb-2 gap-2 justify-end">
    <p-button
      (onClick)="value = 0"
      rounded="true"
      styleClass="w-8 h-8 p-0"
      [outlined]="value !== 0"
      label="1"
    />
    <p-button
      (onClick)="value = 1"
      rounded="true"
      styleClass="w-8 h-8 p-0"
      [outlined]="value !== 1"
      label="2"
    />
    <p-button
      (onClick)="value = 2"
      rounded="true"
      styleClass="w-8 h-8 p-0"
      [outlined]="value !== 2"
      label="3"
    />
    <p-button
      (onClick)="value = 8"
      rounded="true"
      styleClass="w-8 h-8 p-0"
      [outlined]="value !== 8"
      label="9"
    />
  </div>
  <p-tabs [value]="value" scrollable>
    <p-tablist>
      <p-tab [value]="0">Header I</p-tab>
      <p-tab [value]="1">Header II</p-tab>
      <p-tab [value]="2">Header III</p-tab>
      <p-tab [value]="3">Header IV</p-tab>
      <p-tab [value]="4">Header V</p-tab>
      <p-tab [value]="5">Header VI</p-tab>
      <p-tab [value]="6">Header VII</p-tab>
      <p-tab [value]="7">Header VIII</p-tab>
      <p-tab [value]="8">Header IX</p-tab>
    </p-tablist>
    <p-tabpanels>
      <p-tabpanel [value]="0">
        <p class="m-0">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </p-tabpanel>
      <p-tabpanel [value]="1">
        <p class="m-0">
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem
          accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
          ab illo inventore veritatis et quasi architecto beatae vitae dicta
          sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
          aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
          qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit,
          sed quia non numquam eius modi.
        </p>
      </p-tabpanel>
      <p-tabpanel [value]="2">
        <p class="m-0">
          At vero eos et accusamus et iusto odio dignissimos ducimus qui
          blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
          et quas molestias excepturi sint occaecati cupiditate non provident,
          similique sunt in culpa qui officia deserunt mollitia animi, id est
          laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita
          distinctio. Nam libero tempore, cum soluta nobis est eligendi optio
          cumque nihil impedit quo minus.
        </p>
      </p-tabpanel>
      <p-tabpanel [value]="8">
        <p class="m-0">
          At vero eos et accusamus et iusto odio dignissimos ducimus qui
          blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
          et quas molestias excepturi sint occaecati cupiditate non provident,
          similique sunt in culpa qui officia deserunt mollitia animi, id est
          laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita
          distinctio. Nam libero tempore, cum soluta nobis est eligendi optio
          cumque nihil impedit quo minus.
        </p>
      </p-tabpanel>
    </p-tabpanels>
  </p-tabs>
</div>

If you click on button "9" the correct p-tabpanel is selected but the p-tab remains invisble.

Pull Request Link

No response

Reason for not contributing a PR

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

Other Reason

No response

Reproducer

https://stackblitz.com/edit/l6ejdyvh?file=src%2Fapp%2Ftabs-controlled-demo.html

Environment

modified tabs example from prime-ng site

{
  "name": "primeng-tabs-controlled-demo",
  "description": "PrimeNG TabsControlledDemo",
  "license": "MIT",
  "keywords": [],
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test"
  },
  "dependencies": {
    "@angular/animations": "^19.0.1",
    "@angular/cdk": "~19.0.1",
    "@angular/cli": "^19.2.1",
    "@angular/common": "^19.0.1",
    "@angular/compiler": "^19.0.1",
    "@angular/core": "^19.0.1",
    "@angular/forms": "^19.0.1",
    "@angular/platform-browser": "^19.0.1",
    "@angular/platform-browser-dynamic": "^19.0.1",
    "@angular/router": "^19.0.1",
    "@primeng/themes": "^19.0.0",
    "@types/jasmine": "4.3.1",
    "@types/node": "12.20.55",
    "chart.js": "^3.3.2",
    "primeicons": "7.0.0",
    "primeng": "^19.0.0",
    "quill": "1.3.7",
    "rxjs": "~7.8.1",
    "tslib": "^2.5.0",
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^19.0.2",
    "@angular/cli": "^19.0.1",
    "@angular/compiler-cli": "^19.0.1",
    "@angular/language-service": "~16.2.0",
    "@types/jasmine": "~4.3.1",
    "@types/node": "^16.18.67",
    "codelyzer": "^0.0.28",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.2",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~5.5.4"
  }
}

Angular version

19.0.1

PrimeNG version

v19

Node version

No response

Browser(s)

No response

Steps to reproduce the behavior

Click on button "9"

Expected behavior

tab selector should scroll/jump to right

[majkers]

Totally agree!!! In the meantime this is my workaround for it. Give it a try. It is not totally copy paste ready but You will get the point

  <p-tablist>
    @for(tab of tabs(); track tab.routerLink; let i = $index){
      <p-tab [value]="tab.routerLink" ..../>
    }
  </p-tablist>

public tabsComponent: Signal<TabList> = viewChild.required<TabList>(TabList);

  tabs = computed(() => {
    const tabMenuItems: MenuItem[] = this.tabMenuService.readonlyTabs(); //I get it from service
    setTimeout(()=> {
      this.tabsComponent().updateButtonState();
      this.tabsComponent().updateInkBar();
      this.scrollToActiveTab();
    }, 250);
    return tabMenuItems
  })

  private scrollToActiveTab() {
    const element = findSingle(this.tabsComponent().content.nativeElement, '[data-pc-name="tab"][data-p-active="true"]');
    element?.scrollIntoView?.({ block: 'nearest' });
  }