TabView: p-tabview-ink-bar doesn't follow the size of TabPanel header property change

[nlachancedev]

Hi

I had some problems with tabView, especially the p-tabview-ink-bar in TabPanel. the p-tabview-ink-bar seems to not follow the size of changed property [header] for a TabPanel. I tested at init (with ngif) and after init (change from input), both seem to not handle it. I found that if I trigger tabView.tabChanged after an [header] update, the p-tabview-ink-bar changes size properly.

For now, I kind of fixed it on my own with a directive tabPanel to manually trigger the tabView.tabChanged (on a settimeout for UI change) when a [header] changes. But maybe the best will be to fix it in the component directly.

My guess maybe is to add the "tabView.tabChanged" at this point: https://github.com/primefaces/primeng/blob/master/src/app/components/tabview/tabview.ts#L123

Thank you.

[gfragioud]

@yigitfindikli This change causes "ReferenceError: getComputedStyle is not defined" when tabView is server side rendered, because "setHeader" method calls "updateInkBar" that calls "getComputedStyle" that is undefined at server side.

[x4ahmed]

For those who are still having this issue: I had a work around to update the width of the ink-bar based on the width of the container tab:

1. first inject ChangeDetectorRef to the constructor of the component rendering primeng tab view
2. constructor(private changeDetectorRef: ChangeDetectorRef) {}
3. Add AfterViewChecked lifecycle hook to the class
4. Get current tab element, ink-bar element and set the width to the container width
   `
   ngAfterViewChecked(): void

{

let inkBar = document.getElementsByClassName('p-tabview-ink-bar')[0] as HTMLElement;

let currentTab = document.getElementsByClassName('p-highlight')[0] as HTMLElement;

if(inkBar && currentTab){

  inkBar.style.width = currentTab.clientWidth + 'px';

  this.changeDetectorRef.detectChanges();
} 

}
`

Angular CLI: 15.2.6
Node: 16.17.1
Package Manager: npm 8.15.0
OS: win32 x64