fix(tabset): fixed tabset active input (#6768)

lexasq · web-flow · commit e89ca9e568a1 · 2025-08-20T14:53:03.000+03:00
* fix(tabset): fixed tabset active input

* fix(tabset): updated tests

* 20.0.1

* chore(version-bump): updated to v20.0.1
diff --git a/apps/ngx-bootstrap-docs/src/assets/json/current-version.json b/apps/ngx-bootstrap-docs/src/assets/json/current-version.json
@@ -1,3 +1,3 @@
 {
-  "version": "20.0.0"
+  "version": "20.0.1"
 }
diff --git a/libs/common-docs/src/lib/docs-section/docs-section.component.ts b/libs/common-docs/src/lib/docs-section/docs-section.component.ts
@@ -1,6 +1,6 @@
 import { ContentSection } from '../models/content-section.model';
 import { ChangeDetectorRef, Component, Injector, Input } from '@angular/core';
-import { Router, NavigationExtras } from '@angular/router';
+import { ActivatedRoute, Router, NavigationExtras } from '@angular/router';
 
 const availableTabsPaths = ['overview', 'api', 'examples'] as const;
 type AvailableTabsPathsType = typeof availableTabsPaths[number];
@@ -36,9 +36,28 @@ export class DocsSectionComponent {
 
   constructor(
     private injector: Injector,
+    private activatedRoute: ActivatedRoute,
     private router: Router,
     private changeDetection: ChangeDetectorRef
   ) {
+    this.activatedRoute.queryParamMap.subscribe((params) => {
+      this.initActiveTab(params.get('tab')?.toString());
+    });
+  }
+
+  initActiveTab(activeTab?: string) {
+    this.resetTabs();
+    if (!activeTab || !this.checkActiveTab(activeTab)) {
+      this.overview = true;
+      this.onSelect('overview');
+      return;
+    }
+
+    this[activeTab as AvailableTabsPathsType] = true;
+  }
+
+  checkActiveTab(activeTab: string): boolean {
+    return activeTab === 'overview' || activeTab === 'api' || activeTab === 'examples';
   }
 
   onSelect(tabName: string) {
diff --git a/libs/doc-pages/tabs/src/lib/demos/dynamic/dynamic.ts b/libs/doc-pages/tabs/src/lib/demos/dynamic/dynamic.ts
@@ -19,7 +19,7 @@ interface ITab {
 export class DemoTabsDynamicComponent {
   tabs: ITab[] = [
     { title: 'Dynamic Title 1', content: 'Dynamic content 1', removable: false, disabled: false},
-    { title: 'Dynamic Title 2', content: 'Dynamic content 2', removable: false, disabled: false},
+    { title: 'Dynamic Title 2', content: 'Dynamic content 2', removable: false, disabled: false, active: true},
     { title: 'Dynamic Title 3', content: 'Dynamic content 3', removable: true, disabled: false}
   ];
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap-base",
-  "version": "20.0.0",
+  "version": "20.0.1",
   "license": "MIT",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "schematics": "./schematics/src/collection.json",
diff --git a/src/accordion/package.json b/src/accordion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/accordion",
-  "version": "20.0.0",
+  "version": "20.0.1",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/alert/package.json b/src/alert/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/alert",
-  "version": "20.0.0",
+  "version": "20.0.1",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/buttons/package.json b/src/buttons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/buttons",
-  "version": "20.0.0",
+  "version": "20.0.1",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/carousel/package.json b/src/carousel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/carousel",
-  "version": "20.0.0",
+  "version": "20.0.1",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/chronos/package.json b/src/chronos/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/chronos",
-  "version": "20.0.0",
+  "version": "20.0.1",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/collapse/package.json b/src/collapse/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/collapse",
-  "version": "20.0.0",
+  "version": "20.0.1",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/component-loader/package.json b/src/component-loader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/component-loader",
-  "version": "20.0.0",
+  "version": "20.0.1",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/datepicker/package.json b/src/datepicker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/datepicker",
-  "version": "20.0.0",
+  "version": "20.0.1",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/dropdown/package.json b/src/dropdown/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/dropdown",
-  "version": "20.0.0",
+  "version": "20.0.1",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/focus-trap/package.json b/src/focus-trap/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/focus-trap",
-  "version": "20.0.0",
+  "version": "20.0.1",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/locale/package.json b/src/locale/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/locale",
-  "version": "20.0.0",
+  "version": "20.0.1",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/mini-ngrx/package.json b/src/mini-ngrx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/mini-ngrx",
-  "version": "20.0.0",
+  "version": "20.0.1",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/modal/package.json b/src/modal/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/modal",
-  "version": "20.0.0",
+  "version": "20.0.1",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/pagination/package.json b/src/pagination/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/pagination",
-  "version": "20.0.0",
+  "version": "20.0.1",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/popover/package.json b/src/popover/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/popover",
-  "version": "20.0.0",
+  "version": "20.0.1",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/positioning/package.json b/src/positioning/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/positioning",
-  "version": "20.0.0",
+  "version": "20.0.1",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/progressbar/package.json b/src/progressbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/progressbar",
-  "version": "20.0.0",
+  "version": "20.0.1",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/rating/package.json b/src/rating/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/rating",
-  "version": "20.0.0",
+  "version": "20.0.1",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/root/package.json b/src/root/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap",
-  "version": "20.0.0",
+  "version": "20.0.1",
   "description": "Angular Bootstrap",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT",
diff --git a/src/schematics/package.json b/src/schematics/package.json
@@ -1,6 +1,6 @@
 {
   "name": "schematics",
-  "version": "20.0.0",
+  "version": "20.0.1",
   "schematics": "./collection.json",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
diff --git a/src/schematics/src/utils/current_dependency_versions.json b/src/schematics/src/utils/current_dependency_versions.json
@@ -1,4 +1,4 @@
 {
-  "NGX_BOOTSTRAP_VERSION": "20.0.0",
+  "NGX_BOOTSTRAP_VERSION": "20.0.1",
   "BOOTSTRAP_VERSION": "^5.2.3"
 }
diff --git a/src/sortable/package.json b/src/sortable/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/sortable",
-  "version": "20.0.0",
+  "version": "20.0.1",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/tabs/package.json b/src/tabs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/tabs",
-  "version": "20.0.0",
+  "version": "20.0.1",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/tabs/tabset.component.ts b/src/tabs/tabset.component.ts
@@ -65,6 +65,7 @@ export class TabsetComponent implements OnDestroy {
   protected _justified = false;
   protected _type = 'tabs';
   protected _isKeysAllowed = true;
+  private defaultActivationScheduled = false;
 
   constructor(
     config: TabsetConfig,
@@ -86,34 +87,59 @@ export class TabsetComponent implements OnDestroy {
       // Default behavior - add to end
       this.tabs.push(tab);
     }
-    
-    // Set active if it's the first tab and not already active
-    tab.active = this.tabs.length === 1 && !tab.active;
+
+    // Activation logic
+    // - If the newly added tab is already active, set it active again to leverage
+    //   TabDirective's setter which will deactivate others.
+    // - Otherwise, schedule a single deferred default-first activation if none active.
+    if (tab.active) {
+      tab.active = true;
+      return;
+    }
+
+    if (!this.defaultActivationScheduled) {
+      this.defaultActivationScheduled = true;
+      // Defer default activation to avoid racing template-driven [active] inputs
+      Promise.resolve().then(() => {
+        this.defaultActivationScheduled = false;
+        // Guard in case the tabset changed meanwhile
+        if (!this.tabs.length) {
+          return;
+        }
+        if (this.tabs.some((t: TabDirective) => !!t.active)) {
+          return;
+        }
+        const firstEnabled = this.tabs.find((t: TabDirective) => !t.disabled);
+        if (firstEnabled) {
+          firstEnabled.active = true;
+        }
+      });
+    }
   }
 
   private insertTabByOrder(tab: TabDirective): void {
     let insertIndex = this.tabs.length; // Default to end
-    
+
     // Find the correct position to insert the ordered tab
     for (let i = 0; i < this.tabs.length; i++) {
       const existingTab = this.tabs[i];
-      
+
       // If the existing tab has an order and the new tab's order is less than it
-      if (existingTab.tabOrder !== undefined && 
-          tab.tabOrder !== undefined && 
+      if (existingTab.tabOrder !== undefined &&
+          tab.tabOrder !== undefined &&
           tab.tabOrder < existingTab.tabOrder) {
         insertIndex = i;
         break;
       }
-      
+
       // If we reach an unordered tab, we want to insert before it
       // (ordered tabs should come before unordered tabs)
       if (existingTab.tabOrder === undefined) {
         insertIndex = i;
         break;
       }
     }
-    
+
     // Insert at the found position
     this.tabs.splice(insertIndex, 0, tab);
   }
diff --git a/src/tabs/testing/tabset.component.spec.ts b/src/tabs/testing/tabset.component.spec.ts
@@ -118,7 +118,10 @@ describe('Component: Tabs', () => {
     fixture.detectChanges();
   });
 
-  it('should select first tab as active by default', () => {
+  it('should select first tab as active by default', async () => {
+    // Default activation is deferred to a microtask; wait for it before asserting
+    await fixture.whenStable();
+    fixture.detectChanges();
     expectActiveTabs(element, [true, false, false, false]);
   });
 
diff --git a/src/timepicker/package.json b/src/timepicker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/timepicker",
-  "version": "20.0.0",
+  "version": "20.0.1",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/tooltip/package.json b/src/tooltip/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/tooltip",
-  "version": "20.0.0",
+  "version": "20.0.1",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/typeahead/package.json b/src/typeahead/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/typeahead",
-  "version": "20.0.0",
+  "version": "20.0.1",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/utils/package.json b/src/utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/utils",
-  "version": "20.0.0",
+  "version": "20.0.1",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`{`
`2`		`- "version": "20.0.0"`
	`2`	`+ "version": "20.0.1"`
`3`	`3`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "ngx-bootstrap-base",`
`3`		`- "version": "20.0.0",`
	`3`	`+ "version": "20.0.1",`
`4`	`4`	`"license": "MIT",`
`5`	`5`	`"author": "Dmitriy Shekhovtsov <[email protected]>",`
`6`	`6`	`"schematics": "./schematics/src/collection.json",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "ngx-bootstrap/accordion",`
`3`		`- "version": "20.0.0",`
	`3`	`+ "version": "20.0.1",`
`4`	`4`	`"author": "Dmitriy Shekhovtsov <[email protected]>",`
`5`	`5`	`"license": "MIT"`
`6`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "ngx-bootstrap/alert",`
`3`		`- "version": "20.0.0",`
	`3`	`+ "version": "20.0.1",`
`4`	`4`	`"author": "Dmitriy Shekhovtsov <[email protected]>",`
`5`	`5`	`"license": "MIT"`
`6`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "ngx-bootstrap/buttons",`
`3`		`- "version": "20.0.0",`
	`3`	`+ "version": "20.0.1",`
`4`	`4`	`"author": "Dmitriy Shekhovtsov <[email protected]>",`
`5`	`5`	`"license": "MIT"`
`6`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "ngx-bootstrap/carousel",`
`3`		`- "version": "20.0.0",`
	`3`	`+ "version": "20.0.1",`
`4`	`4`	`"author": "Dmitriy Shekhovtsov <[email protected]>",`
`5`	`5`	`"license": "MIT"`
`6`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "ngx-bootstrap/chronos",`
`3`		`- "version": "20.0.0",`
	`3`	`+ "version": "20.0.1",`
`4`	`4`	`"author": "Dmitriy Shekhovtsov <[email protected]>",`
`5`	`5`	`"license": "MIT"`
`6`	`6`	`}`