feat(tabs): emit selection-related events when selection is modified after closing the selected tab

packages/calcite-components/src/components.d.ts

@@ -4454,6 +4454,11 @@ export namespace Components {
         "syncId": string;
     }
     interface CalciteTabTitle {
+        /**
+          * This activates a tab in order for it and its associated tab-title be selected.
+          * @param userTriggered - when `true`, user-interaction events will be emitted in addition to internal events
+         */
+        "activateTab": (userTriggered?: boolean) => Promise<void>;
         "bordered": boolean;
         /**
           * When `true`, a close button is added to the component.

packages/calcite-components/src/components/tab-nav/tab-nav.tsx

@@ -385,9 +385,10 @@ export class TabNav {
 
   private handleTabTitleClose(closedTabTitleEl: HTMLCalciteTabTitleElement): void {
     const { tabTitles } = this;
+    const selectionModified = closedTabTitleEl.selected;
 
     const visibleTabTitlesIndices = tabTitles.reduce(
-      (tabTitleIndices, tabTitle, index) =>
+      (tabTitleIndices: number[], tabTitle, index) =>
         !tabTitle.closed ? [...tabTitleIndices, index] : tabTitleIndices,
       [],
     );
@@ -396,6 +397,10 @@ export class TabNav {
     if (totalVisibleTabTitles === 1 && tabTitles[visibleTabTitlesIndices[0]].closable) {
       tabTitles[visibleTabTitlesIndices[0]].closable = false;
       this.selectedTabId = visibleTabTitlesIndices[0];
+
+      if (selectionModified) {
+        tabTitles[visibleTabTitlesIndices[0]].activateTab();
+      }
     } else if (totalVisibleTabTitles > 1) {
       const closedTabTitleIndex = tabTitles.findIndex((el) => el === closedTabTitleEl);
       const nextTabTitleIndex = visibleTabTitlesIndices.find(
@@ -404,6 +409,7 @@ export class TabNav {
 
       if (this.selectedTabId === closedTabTitleIndex) {
         this.selectedTabId = nextTabTitleIndex ? nextTabTitleIndex : totalVisibleTabTitles - 1;
+        tabTitles[this.selectedTabId].activateTab();
       }
     }
 

packages/calcite-components/src/components/tab-title/tab-title.tsx

@@ -68,7 +68,7 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo
   @Watch("selected")
   selectedHandler(): void {
     if (this.selected) {
-      this.emitActiveTab(false);
+      this.activateTab(false);
     }
   }
 
@@ -175,7 +175,7 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo
       this.updateHasText();
     }
     if (this.tab && this.selected) {
-      this.emitActiveTab(false);
+      this.activateTab(false);
     }
   }
 
@@ -296,11 +296,7 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo
 
   @Listen("click")
   onClick(): void {
-    if (this.disabled) {
-      return;
-    }
-
-    this.emitActiveTab();
+    this.activateTab();
   }
 
   @Listen("keydown")
@@ -309,7 +305,7 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo
       case " ":
       case "Enter":
         if (!event.composedPath().includes(this.closeButtonEl)) {
-          this.emitActiveTab();
+          this.activateTab();
           event.preventDefault();
         }
         break;
@@ -439,6 +435,26 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo
     this.controls = tabIds[titleIds.indexOf(this.el.id)] || null;
   }
 
+  /**
+   * This activates a tab in order for it and its associated tab-title be selected.
+   *
+   * @param userTriggered - when `true`, user-interaction events will be emitted in addition to internal events
+   * @internal
+   */
+  @Method()
+  async activateTab(userTriggered = true): Promise<void> {
+    if (this.disabled || this.closed) {
+      return;
+    }
+    const payload = { tab: this.tab };
+    this.calciteInternalTabsActivate.emit(payload);
+
+    if (userTriggered) {
+      // emit in the next frame to let internal events sync up
+      requestAnimationFrame(() => this.calciteTabsActivate.emit());
+    }
+  }
+
   //--------------------------------------------------------------------------
   //
   //  Private Methods
@@ -494,19 +510,6 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
 
-  emitActiveTab(userTriggered = true): void {
-    if (this.disabled || this.closed) {
-      return;
-    }
-    const payload = { tab: this.tab };
-    this.calciteInternalTabsActivate.emit(payload);
-
-    if (userTriggered) {
-      // emit in the next frame to let internal events sync up
-      requestAnimationFrame(() => this.calciteTabsActivate.emit());
-    }
-  }
-
   closeTabTitleAndNotify(): void {
     this.closed = true;
     this.calciteInternalTabsClose.emit({ tab: this.tab });

packages/calcite-components/src/components/tabs/tabs.e2e.ts

@@ -1,9 +1,10 @@
-import { newE2EPage } from "@stencil/core/testing";
+import { E2EElement, E2EPage, EventSpy, newE2EPage } from "@stencil/core/testing";
 import { html } from "../../../support/formatting";
 import { accessible, defaults, hidden, reflects, renders } from "../../tests/commonTests";
 import { GlobalTestProps } from "../../tests/utils";
 import { Scale } from "../interfaces";
 import { TabPosition } from "../tabs/interfaces";
+import { CSS as TabTitleCSS } from "../tab-title/resources";
 
 describe("calcite-tabs", () => {
   const tabsContent = html`
@@ -360,4 +361,75 @@ describe("calcite-tabs", () => {
 
     expect(selectedTitleOnEmit).toBe("boats");
   });
+
+  describe("closing tabs", () => {
+    let page: E2EPage;
+    let tabsActivateSpy: EventSpy;
+    let tabChangeSpy: EventSpy;
+    let allTabTitles: E2EElement[];
+    let allTabs: E2EElement[];
+
+    beforeEach(async (): Promise<void> => {
+      page = await newE2EPage();
+      await page.setContent(html`
+        <calcite-tabs>
+          <calcite-tab-nav slot="title-group">
+            <calcite-tab-title id="tab-title-1" closable>Tab 1 Title</calcite-tab-title>
+            <calcite-tab-title id="tab-title-2" closable>Tab 2 Title</calcite-tab-title>
+            <calcite-tab-title id="tab-title-3" closable>Tab 3 Title</calcite-tab-title>
+            <calcite-tab-title id="tab-title-4" closable selected>Tab 4 Title</calcite-tab-title>
+          </calcite-tab-nav>
+          <calcite-tab id="tab-1">Tab 1 Content</calcite-tab>
+          <calcite-tab id="tab-2">Tab 2 Content</calcite-tab>
+          <calcite-tab id="tab-3">Tab 3 Content</calcite-tab>
+          <calcite-tab id="tab-4" selected>Tab 4 Content</calcite-tab>
+        </calcite-tabs>
+      `);
+
+      allTabTitles = await page.findAll("calcite-tab-title");
+      allTabs = await page.findAll("calcite-tab");
+
+      const tabNav = await page.find("calcite-tab-nav");
+      const tabs = await page.find("calcite-tabs");
+
+      tabsActivateSpy = await tabNav.spyOnEvent("calciteTabsActivate");
+      tabChangeSpy = await tabs.spyOnEvent("calciteTabChange");
+    });
+
+    it("should emit tab change events when closing affects selected tab", async () => {
+      await page.click(`#tab-title-4 >>> .${TabTitleCSS.closeButton}`);
+      await page.waitForChanges();
+
+      expect(tabsActivateSpy).toHaveReceivedEventTimes(1);
+      expect(tabChangeSpy).toHaveReceivedEventTimes(1);
+
+      expect(await allTabTitles[0].isVisible()).toBe(true);
+      expect(await allTabTitles[1].isVisible()).toBe(true);
+      expect(await allTabTitles[2].isVisible()).toBe(true);
+      expect(await allTabTitles[3].isVisible()).toBe(false);
+
+      expect(await allTabs[0].isVisible()).toBe(false);
+      expect(await allTabs[1].isVisible()).toBe(false);
+      expect(await allTabs[2].isVisible()).toBe(true);
+      expect(await allTabs[3].isVisible()).toBe(false);
+    });
+
+    it("should NOT emit tab change events when closing does not affect selected tab", async () => {
+      await page.click(`#tab-title-1 >>> .${TabTitleCSS.closeButton}`);
+      await page.waitForChanges();
+
+      expect(tabsActivateSpy).toHaveReceivedEventTimes(0);
+      expect(tabChangeSpy).toHaveReceivedEventTimes(0);
+
+      expect(await allTabTitles[0].isVisible()).toBe(false);
+      expect(await allTabTitles[1].isVisible()).toBe(true);
+      expect(await allTabTitles[2].isVisible()).toBe(true);
+      expect(await allTabTitles[3].isVisible()).toBe(true);
+
+      expect(await allTabs[0].isVisible()).toBe(false);
+      expect(await allTabs[1].isVisible()).toBe(false);
+      expect(await allTabs[2].isVisible()).toBe(false);
+      expect(await allTabs[3].isVisible()).toBe(true);
+    });
+  });
 });