From 525481226ee6c26532f5c98c90ea9d636869a972 Mon Sep 17 00:00:00 2001
From: Deborah <dobanisola@scottlogic.com>
Date: Wed, 28 Feb 2024 09:24:50 +0000
Subject: [PATCH] fix tab change inkbar for material design theme

---
 src/app/components/tabmenu/tabmenu.spec.ts | 22 ++++++++++++++++++++++
 src/app/components/tabmenu/tabmenu.ts      | 14 ++++++++++++--
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/app/components/tabmenu/tabmenu.spec.ts b/src/app/components/tabmenu/tabmenu.spec.ts
index 140f6c866f5..81220a84673 100755
--- 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
index c8f167150cb..6382a17e6c8 100644
--- 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;
         }