Merge pull request #14895 from dobanisola-scottlogic/fix_TabChange_in…

…kbar_for_material_design_theme Fixed #14867 - Tab change inkbar for material design theme
primefaces · Feb 28, 2024 · e5ce636 · e5ce636
2 parents 1300df1 + 5254812
commit e5ce636
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 2 deletions.
diff --git a/src/app/components/tabmenu/tabmenu.spec.ts b/src/app/components/tabmenu/tabmenu.spec.ts
@@ -117,6 +117,28 @@ describe('TabMenu', () => {
         expect(itemClickSpy).toHaveBeenCalled();
     });
 
+    it('should select item when activeItem controlled', () => {
+        tabmenu.model = [
+            { label: 'Stats', icon: 'pi pi-fw pi-bar-chart' },
+            { label: 'Calendar', icon: 'pi pi-fw pi-calendar' },
+            { label: 'Documentation', icon: 'pi pi-fw pi-book' },
+            { label: 'Support', icon: 'pi pi-fw pi-support' },
+            { label: 'Social', icon: 'pi pi-fw pi-twitter' }
+        ];
+
+        const updateInkBarSpy = spyOn(tabmenu, 'updateInkBar').and.callThrough();
+
+        tabmenu.activeItem = tabmenu.model[1];
+        fixture.detectChanges();
+
+        const itemList = fixture.debugElement.query(By.css('ul'));
+
+        expect(itemList.children[1].nativeElement.className).toContain('p-highlight');
+        expect(tabmenu.activeItem.label).toEqual('Calendar');
+        expect(tabmenu.activeItem.icon).toContain('pi-calendar');
+        expect(updateInkBarSpy).toHaveBeenCalled();
+    });
+
     it("shouldn't show content", () => {
         tabmenu.model = [
             { label: 'Stats', icon: 'pi pi-fw pi-bar-chart', disabled: true },

diff --git a/src/app/components/tabmenu/tabmenu.ts b/src/app/components/tabmenu/tabmenu.ts
@@ -150,7 +150,15 @@ export class TabMenu implements AfterContentInit, AfterViewInit, AfterViewChecke
      * Defines the default active menuitem
      * @group Props
      */
-    @Input() activeItem: MenuItem | undefined;
+    @Input() set activeItem(value: MenuItem | undefined) {
+        this._activeItem = value;
+        this.activeItemChange.emit(value);
+        this.tabChanged = true;
+    }
+
+    get activeItem(): MenuItem | undefined {
+        return this._activeItem;
+    }
     /**
      * When enabled displays buttons at each side of the tab headers to scroll the tab list.
      * @group Props
@@ -221,6 +229,8 @@ export class TabMenu implements AfterContentInit, AfterViewInit, AfterViewChecke
 
     _model: MenuItem[] | undefined;
 
+    _activeItem: MenuItem | undefined;
+
     focusedItemInfo = signal<any>(null);
 
     get focusableItems() {
@@ -267,7 +277,7 @@ export class TabMenu implements AfterContentInit, AfterViewInit, AfterViewChecke
     }
 
     ngAfterViewChecked() {
-        if (this.tabChanged) {
+        if (isPlatformBrowser(this.platformId) && this.tabChanged) {
             this.updateInkBar();
             this.tabChanged = false;
         }