feat(tab-bar): Allow activation of tab without previous active tab (#…

…4615)
material-components · Apr 22, 2019 · 7d4124d · 7d4124d
1 parent 0826a78
commit 7d4124d
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/packages/mdc-tab-bar/adapter.ts b/packages/mdc-tab-bar/adapter.ts
@@ -74,7 +74,7 @@ export interface MDCTabBarAdapter {
    * @param index The index of the tab to activate
    * @param clientRect The client rect of the previously active Tab Indicator
    */
-  activateTabAtIndex(index: number, clientRect: ClientRect): void;
+  activateTabAtIndex(index: number, clientRect?: ClientRect): void;
 
   /**
    * Deactivates the tab at the given index

diff --git a/packages/mdc-tab-bar/foundation.ts b/packages/mdc-tab-bar/foundation.ts
@@ -97,8 +97,13 @@ export class MDCTabBarFoundation extends MDCFoundation<MDCTabBarAdapter> {
       return;
     }
 
-    this.adapter_.deactivateTabAtIndex(previousActiveIndex);
-    this.adapter_.activateTabAtIndex(index, this.adapter_.getTabIndicatorClientRectAtIndex(previousActiveIndex));
+    let previousClientRect;
+    if (previousActiveIndex !== -1) {
+      this.adapter_.deactivateTabAtIndex(previousActiveIndex);
+      previousClientRect = this.adapter_.getTabIndicatorClientRectAtIndex(previousActiveIndex);
+    }
+
+    this.adapter_.activateTabAtIndex(index, previousClientRect);
     this.scrollIntoView(index);
 
     this.adapter_.notifyTabActivated(index);

diff --git a/test/unit/mdc-tab-bar/foundation.test.js b/test/unit/mdc-tab-bar/foundation.test.js
@@ -376,6 +376,14 @@ test('#activateTab() deactivates the previously active tab', () => {
   td.verify(mockAdapter.deactivateTabAtIndex(6), {times: 1});
 });
 
+test('#activateTab() does not deactivate the previously active tab if there is none', () => {
+  const {foundation, mockAdapter} = setupActivateTabTest();
+  td.when(mockAdapter.getTabListLength()).thenReturn(13);
+  td.when(mockAdapter.getPreviousActiveTabIndex()).thenReturn(-1);
+  foundation.activateTab(1);
+  td.verify(mockAdapter.deactivateTabAtIndex(td.matchers.anything()), {times: 0});
+});
+
 test('#activateTab() activates the newly active tab with the previously active tab\'s indicatorClientRect', () => {
   const {foundation, mockAdapter} = setupActivateTabTest();
   td.when(mockAdapter.getTabListLength()).thenReturn(13);