fix(tabs): update tabs if selectedIndex = -1 (#9855)

* fix(tabs): update tabs if selectedIndex = -1 * fix(tabs): selected prop two-way binding support Co-authored-by: Galina Edinakova <[email protected]> Co-authored-by: Anastas Staev <[email protected]> Co-authored-by: Diyan Dimitrov <[email protected]> Co-authored-by: Konstantin Dinev <[email protected]>
IgniteUI · Jul 21, 2021 · 27e1055 · 27e1055
1 parent f51cfa4
commit 27e1055
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 33 deletions.
diff --git a/projects/igniteui-angular/src/lib/tabs/tab-item.directive.ts b/projects/igniteui-angular/src/lib/tabs/tab-item.directive.ts
@@ -1,4 +1,4 @@
-import { ContentChild, Directive, Input, TemplateRef, ViewChild } from '@angular/core';
+import { ContentChild, Directive, EventEmitter, Input, Output, TemplateRef, ViewChild } from '@angular/core';
 import { Direction, IgxSlideComponentBase } from '../carousel/carousel-base';
 import { IgxTabHeaderBase, IgxTabItemBase, IgxTabContentBase, IgxTabsBase } from './tabs.base';
 
@@ -21,6 +21,12 @@ export abstract class IgxTabItemDirective implements IgxTabItemBase, IgxSlideCom
     @ViewChild('panelTemplate', { static: true })
     public panelTemplate: TemplateRef<any>;
 
+    /**
+     * Output to enable support for two-way binding on [(selected)]
+     */
+    @Output()
+    public selectedChange = new EventEmitter<boolean>();
+
     /**
      * An @Input property that allows you to enable/disable the item.
      */
@@ -46,6 +52,7 @@ export abstract class IgxTabItemDirective implements IgxTabItemBase, IgxSlideCom
         if (this._selected !== value) {
             this._selected = value;
             this.tabs.selectTab(this, this._selected);
+            this.selectedChange.emit(this._selected);
         }
     }
 

diff --git a/projects/igniteui-angular/src/lib/tabs/tabs.directive.ts b/projects/igniteui-angular/src/lib/tabs/tabs.directive.ts
@@ -1,7 +1,9 @@
 import { AnimationBuilder } from '@angular/animations';
-import { AfterViewInit, ContentChildren, Directive, EventEmitter,
+import {
+    AfterViewInit, ContentChildren, Directive, EventEmitter,
     HostBinding,
-    Input, OnDestroy, Output, QueryList } from '@angular/core';
+    Input, OnDestroy, Output, QueryList
+} from '@angular/core';
 import { Subscription } from 'rxjs';
 import { Direction, IgxCarouselComponentBase } from '../carousel/carousel-base';
 import { IBaseEventArgs } from '../core/utils';
@@ -170,7 +172,9 @@ export abstract class IgxTabsDirective extends IgxCarouselComponentBase implemen
 
         if (selected) {
             const index = tabs.indexOf(tab);
-            this.selectedIndex = index;
+            if (index > -1) {
+                this.selectedIndex = index;
+            }
         } else {
             if (tabs.every(t => !t.selected)) {
                 this.selectedIndex = -1;
@@ -196,33 +200,32 @@ export abstract class IgxTabsDirective extends IgxCarouselComponentBase implemen
     protected onItemChanges() {
         this.setAttributes();
 
-        if (this.selectedIndex >= 0 && this.selectedIndex < this.items.length) {
+        // Check if there is selected tab
+        let selectedIndex = -1;
+        this.items.some((tab, i) => {
+            if (tab.selected) {
+                selectedIndex = i;
+            }
+            return tab.selected;
+        });
 
-            // Check if there is selected tab
-            let selectedIndex = -1;
-            this.items.some((tab, i) => {
-                if (tab.selected) {
-                    selectedIndex = i;
-                }
-                return tab.selected;
+        if (selectedIndex >= 0) {
+            // Set the selected index to the tab that has selected=true
+            Promise.resolve().then(() => {
+                this.selectedIndex = selectedIndex;
             });
-
-            if (selectedIndex >= 0) {
-                // Select the same tab that was previously selected
-                Promise.resolve().then(() => {
-                    this.selectedIndex = selectedIndex;
-                });
-            } else {
+        } else {
+            if (this.selectedIndex >= 0 && this.selectedIndex < this.items.length) {
                 // Select the tab on the same index the previous selected tab was
                 Promise.resolve().then(() => {
                     this.updateSelectedTabs(null);
                 });
+            } else if (this.selectedIndex >= this.items.length) {
+                // Select the last tab
+                Promise.resolve().then(() => {
+                    this.selectedIndex = this.items.length - 1;
+                });
             }
-        } else if (this.selectedIndex >= this.items.length) {
-            // Select the last tab
-            Promise.resolve().then(() => {
-                this.selectedIndex = this.items.length - 1;
-            });
         }
     }
 
@@ -290,7 +293,8 @@ export abstract class IgxTabsDirective extends IgxCarouselComponentBase implemen
     private triggerPanelAnimations(oldSelectedIndex: number) {
         const item = this.items.get(this._selectedIndex);
 
-        if (!this.disableAnimation &&
+        if (item &&
+            !this.disableAnimation &&
             this.hasPanels &&
             this.currentItem &&
             !this.currentItem.selected) {

diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.spec.ts b/projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.spec.ts
@@ -8,10 +8,11 @@ import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
 import { Router } from '@angular/router';
 import { Location } from '@angular/common';
-import { TabsContactsComponent, TabsDisabledTestComponent, TabsRoutingDisabledTestComponent, TabsRoutingGuardTestComponent,
-    TabsRoutingTestComponent, TabsTabsOnlyModeTest1Component, TabsTabsOnlyModeTest2Component, TabsTest2Component, TabsTestBug4420Component,
-    TabsTestComponent, TabsTestCustomStylesComponent, TabsTestHtmlAttributesComponent, TabsTestSelectedTabComponent,
-    TabsWithPrefixSuffixTestComponent, TemplatedTabsTestComponent } from '../../test-utils/tabs-components.spec';
+import { AddingSelectedTabComponent, TabsContactsComponent, TabsDisabledTestComponent, TabsRoutingDisabledTestComponent,
+    TabsRoutingGuardTestComponent, TabsRoutingTestComponent, TabsTabsOnlyModeTest1Component, TabsTabsOnlyModeTest2Component,
+    TabsTest2Component, TabsTestBug4420Component, TabsTestComponent, TabsTestCustomStylesComponent,
+    TabsTestHtmlAttributesComponent, TabsTestSelectedTabComponent, TabsWithPrefixSuffixTestComponent,
+    TemplatedTabsTestComponent } from '../../test-utils/tabs-components.spec';
 import { IgxTabsModule } from './tabs.module';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec';
@@ -57,9 +58,8 @@ describe('IgxTabs', () => {
             declarations: [TabsTestHtmlAttributesComponent, TabsTestComponent, TabsTest2Component, TemplatedTabsTestComponent,
                 TabsRoutingDisabledTestComponent, TabsTestSelectedTabComponent, TabsTestCustomStylesComponent, TabsTestBug4420Component,
                 TabsRoutingTestComponent, TabsTabsOnlyModeTest1Component, TabsTabsOnlyModeTest2Component, TabsDisabledTestComponent,
-                TabsRoutingGuardTestComponent, TabsWithPrefixSuffixTestComponent, TabsContactsComponent],
-            imports: [IgxTabsModule, BrowserAnimationsModule,
-                IgxButtonModule, IgxIconModule, IgxDropDownModule, IgxToggleModule,
+                TabsRoutingGuardTestComponent, TabsWithPrefixSuffixTestComponent, TabsContactsComponent, AddingSelectedTabComponent],
+            imports: [IgxTabsModule, BrowserAnimationsModule, IgxButtonModule, IgxIconModule, IgxDropDownModule, IgxToggleModule,
                 RoutingViewComponentsModule, IgxPrefixModule, IgxSuffixModule, RouterTestingModule.withRoutes(testRoutes)],
             providers: [RoutingTestGuard, PlatformUtil]
         }).compileComponents();
@@ -477,6 +477,24 @@ describe('IgxTabs', () => {
             expect(indicator.nativeElement.style.width).toBe('90px');
         }));
 
+        it('add a tab with selected set to true', fakeAsync(() => {
+            const fixture = TestBed.createComponent(AddingSelectedTabComponent);
+            const tabs = fixture.componentInstance.tabs;
+            fixture.detectChanges();
+
+            tick(100);
+            fixture.detectChanges();
+
+            expect(tabs.items.length).toBe(2);
+            expect(tabs.selectedIndex).toBe(0);
+
+            fixture.componentInstance.addTab(3);
+            fixture.detectChanges();
+            tick(100);
+
+            expect(tabs.items.length).toBe(3);
+            expect(tabs.selectedIndex).toBe(2);
+        }));
     });
 
     describe('Routing Navigation Tests', () => {
@@ -1257,7 +1275,6 @@ describe('IgxTabs', () => {
         });
     });
 
-
     it('should hide scroll buttons when no longer needed after deleting tabs.', async () => {
         const fixture = TestBed.createComponent(TabsContactsComponent);
         const tabs = fixture.componentInstance.tabs;

diff --git a/projects/igniteui-angular/src/lib/test-utils/tabs-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/tabs-components.spec.ts
@@ -503,3 +503,30 @@ export class TabsWithPrefixSuffixTestComponent extends TabsTestComponent {
 export class TabsContactsComponent extends TabsTestComponent {
     public contacts = SampleTestData.personAvatarData();
 }
+
+@Component({
+    template: `
+    <div #wrapperDiv style="display: flex;">
+            <igx-tabs>
+                <igx-tab-item *ngFor="let tab of collection" [(selected)]="tab.selected">
+                    <igx-tab-header><span igxTabHeaderLabel>{{ tab.name }}</span></igx-tab-header>
+                    <igx-tab-content></igx-tab-content>
+                </igx-tab-item>
+            </igx-tabs>
+        </div>`
+})
+export class AddingSelectedTabComponent {
+    @ViewChild(IgxTabsComponent, {static: true}) public tabs: IgxTabsComponent;
+    public collection: any[];
+    constructor() {
+        this.collection = [
+            { name: 'tab1', selected: true },
+            { name: 'tab2', selected: false }
+        ];
+    }
+
+    public addTab(num: number) {
+        this.collection.forEach(t => t.selected = false);
+        this.collection.push({name: 'tab' + num, selected: true });
+    }
+}
diff --git a/src/app/tabs/tabs.sample.html b/src/app/tabs/tabs.sample.html
@@ -261,5 +261,26 @@ <h3 class="sample-title">Add/Remove Tabs with prefix and suffix</h3>
                 </igx-tab-item>
             </igx-tabs>
         </div>
+
+        <div>
+            <h3 class="sample-title">Bind selected property</h3>
+            <button [igxButton]="'outlined'" class="action-button" (click)="addSelectedTab()">Add Tab</button>
+
+            <igx-tabs
+                #dynamicTabs
+            >
+                <igx-tab-item
+                    *ngFor="let tab of tabsArray; index as i"
+                    [(selected)]="tab.selected"
+                >
+                    <igx-tab-header>
+                        <span igxTabHeaderLabel>{{tab.name}}</span>
+                    </igx-tab-header>
+                    <igx-tab-content>
+                        {{tab.name}}
+                    </igx-tab-content>
+                </igx-tab-item>
+            </igx-tabs>
+        </div>
     </div>
 </div>
diff --git a/src/app/tabs/tabs.sample.ts b/src/app/tabs/tabs.sample.ts
@@ -89,6 +89,10 @@ export class TabsSampleComponent implements OnInit {
         text: 'Lisa Landers'
     }];
 
+    public tabsArray = [
+        { name: 'Tab 1', selected: true },
+        { name: 'Tab 2', selected: true }
+    ];
 
     public ngOnInit(): void {
         for (let i = 0; i < 20; i++) {
@@ -109,6 +113,13 @@ export class TabsSampleComponent implements OnInit {
         });
     }
 
+    public addSelectedTab() {
+        this.tabsArray.forEach(t => {
+            t.selected = false;
+        });
+        this.tabsArray.push({ name: 'New Tab', selected: true });
+    }
+
     public closeTab(i: number) {
         this.contacts.splice(i, 1);
     }