Skip to content

Commit

Permalink
Merge pull request #11487 from volvachev/fix-tabview-empty-panel
Browse files Browse the repository at this point in the history
fix(primeng/p-tabview): error on adding an item to an empty tab panel
  • Loading branch information
cetincakiroglu authored Aug 9, 2022
2 parents c1dd146 + d6ba1b1 commit 0604be1
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 9 deletions.
34 changes: 26 additions & 8 deletions src/app/components/tabview/tabview.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import {NgModule,Component,ElementRef,OnDestroy,Input,Output,EventEmitter,AfterC
import {CommonModule} from '@angular/common';
import {TooltipModule} from 'primeng/tooltip';
import {RippleModule} from 'primeng/ripple';
import {SharedModule,PrimeTemplate} from 'primeng/api';
import {BlockableUI} from 'primeng/api';
import {SharedModule,PrimeTemplate,BlockableUI} from 'primeng/api';
import {DomHandler} from 'primeng/dom';
import {Subscription} from 'rxjs';

let idx: number = 0;

Expand Down Expand Up @@ -120,8 +120,13 @@ export class TabPanel implements AfterContentInit,OnDestroy {

set header(header: string) {
this._header = header;
this.tabView.updateInkBar();
this.tabView.cd.markForCheck();

// We have to wait for the rendering and then retrieve the actual size element from the DOM.
// in future `Promise.resolve` can be changed to `queueMicrotask` (if ie11 support will be dropped)
Promise.resolve().then(() => {
this.tabView.updateInkBar();
this.tabView.cd.markForCheck();
});
}

@Input() get leftIcon(): string {
Expand Down Expand Up @@ -191,7 +196,7 @@ export class TabPanel implements AfterContentInit,OnDestroy {
'class': 'p-element'
}
})
export class TabView implements AfterContentInit,AfterViewChecked,BlockableUI {
export class TabView implements AfterContentInit,AfterViewChecked,OnDestroy,BlockableUI {

@Input() orientation: string = 'top';

Expand Down Expand Up @@ -234,13 +239,15 @@ export class TabView implements AfterContentInit,AfterViewChecked,BlockableUI {
backwardIsDisabled: boolean = true;

forwardIsDisabled: boolean = false;

private tabChangesSubscription!: Subscription;

constructor(public el: ElementRef, public cd: ChangeDetectorRef) {}

ngAfterContentInit() {
this.initTabs();

this.tabPanels.changes.subscribe(_ => {
this.tabChangesSubscription = this.tabPanels.changes.subscribe(_ => {
this.initTabs();
});
}
Expand All @@ -252,6 +259,12 @@ export class TabView implements AfterContentInit,AfterViewChecked,BlockableUI {
}
}

ngOnDestroy(): void {
if (this.tabChangesSubscription) {
this.tabChangesSubscription.unsubscribe();
}
}

initTabs(): void {
this.tabs = this.tabPanels.toArray();
let selectedTab: TabPanel = this.findSelectedTab();
Expand Down Expand Up @@ -356,7 +369,7 @@ export class TabView implements AfterContentInit,AfterViewChecked,BlockableUI {
return index;
}

getBlockableElement(): HTMLElement {
getBlockableElement(): HTMLElement {
return this.el.nativeElement.children[0];
}

Expand All @@ -382,7 +395,12 @@ export class TabView implements AfterContentInit,AfterViewChecked,BlockableUI {

updateInkBar() {
if (this.navbar) {
let tabHeader = DomHandler.findSingle(this.navbar.nativeElement, 'li.p-highlight');
const tabHeader: HTMLElement | null = DomHandler.findSingle(this.navbar.nativeElement, 'li.p-highlight');

if (!tabHeader) {
return;
}

this.inkbar.nativeElement.style.width = DomHandler.getWidth(tabHeader) + 'px';
this.inkbar.nativeElement.style.left = DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(this.navbar.nativeElement).left + 'px';
}
Expand Down
2 changes: 1 addition & 1 deletion src/app/showcase/components/tabview/tabviewdemo.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {Component} from '@angular/core';;
import {Component} from '@angular/core';

@Component({
templateUrl: './tabviewdemo.html',
Expand Down

0 comments on commit 0604be1

Please sign in to comment.