fix(kit): Tabs fix multiple emitting of activeItemIndexChange

projects/kit/components/tabs/tab.directive.ts

@@ -7,7 +7,7 @@ import {tuiTypedFromEvent} from '@taiga-ui/cdk/observables';
 import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';
 import {tuiIsNativeFocused} from '@taiga-ui/cdk/utils/focus';
 import {TuiWithIcons} from '@taiga-ui/core/directives/icons';
-import {EMPTY, filter, merge, switchMap} from 'rxjs';
+import {EMPTY, filter, merge, switchMap, take} from 'rxjs';
 
 export const TUI_TAB_ACTIVATE = 'tui-tab-activate';
 
@@ -35,7 +35,9 @@ export class TuiTab implements OnDestroy {
         this.el.matches('button')
             ? tuiTypedFromEvent(this.el, 'click').pipe(
                   // Delaying execution until after all other click callbacks
-                  switchMap(() => tuiTypedFromEvent(this.el.parentElement!, 'click')),
+                  switchMap(() =>
+                      tuiTypedFromEvent(this.el.parentElement!, 'click').pipe(take(1)),
+                  ),
               )
             : EMPTY,
     )

projects/kit/components/tabs/test/tabs.component.spec.ts

@@ -4,14 +4,22 @@ import {ChangeDetectionStrategy, Component, Input, ViewChild} from '@angular/cor
 import type {ComponentFixture} from '@angular/core/testing';
 import {TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
-import {TuiTabs, TuiTabsDirective, TuiTabsHorizontal} from '@taiga-ui/kit';
+import {
+    TUI_TAB_ACTIVATE,
+    TuiTabs,
+    TuiTabsDirective,
+    TuiTabsHorizontal,
+} from '@taiga-ui/kit';
 
 describe('Tabs', () => {
     @Component({
         standalone: true,
         imports: [AsyncPipe, CommonModule, TuiTabs],
         template: `
-            <tui-tabs [(activeItemIndex)]="activeItemIndex">
+            <tui-tabs
+                [(activeItemIndex)]="activeItemIndex"
+                (${TUI_TAB_ACTIVATE})="onTabActivate($event)"
+            >
                 <button
                     *ngFor="let tab of tabs"
                     tuiTab
@@ -34,6 +42,10 @@ describe('Tabs', () => {
 
         @Input()
         public tabs = [1, 2, 3];
+
+        public onTabActivate(_: number): void {
+            //
+        }
     }
 
     let fixture: ComponentFixture<Test>;
@@ -78,6 +90,23 @@ describe('Tabs', () => {
             expect(secondTab).toEqual(component.tabsDirective.activeElement);
         });
 
+        it('when you click on a tab tui-tab-activate event emits once', () => {
+            const [firstTab, secondTab] = getTabs().map(
+                (tab) => tab.nativeElement as HTMLButtonElement,
+            );
+
+            secondTab?.click();
+            fixture.detectChanges();
+
+            jest.spyOn(component, 'onTabActivate');
+
+            firstTab?.click();
+            fixture.detectChanges();
+
+            expect(component.activeItemIndex).toBe(0);
+            expect(component.onTabActivate).toHaveBeenCalledTimes(1);
+        });
+
         it('when a tab is active, it has the class _active', () => {
             const [firstTab, secondTab] = getTabs().map(
                 (tab) => tab.nativeElement as HTMLButtonElement,