: Ensure that the active tab exists.

EventStore · Oct 3, 2024 · 4d8bb49 · 4d8bb49
1 parent fb12b85
commit 4d8bb49
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/.changeset/fifty-jokes-flash.md b/.changeset/fifty-jokes-flash.md
@@ -0,0 +1,5 @@
+---
+'@eventstore-ui/components': patch
+---
+
+`es-tabs`: Ensure that the active tab exists.
diff --git a/packages/components/src/components/es-tabs/es-tabs.tsx b/packages/components/src/components/es-tabs/es-tabs.tsx
@@ -59,6 +59,7 @@ export class EsTabs {
 
     componentWillLoad() {
         this.setUpActiveParam(this.activeParam);
+        this.updateActiveIfNoMatchesTabs(this.tabs);
     }
 
     disconnectedCallback() {
@@ -90,6 +91,12 @@ export class EsTabs {
         this.tabChange.emit(active);
     }
 
+    @Watch('tabs')
+    updateActiveIfNoMatchesTabs(tabs: Tab[]) {
+        if (tabs.find(({ id }) => id === this.active)) return;
+        this.active = this.tabs[0].id;
+    }
+
     renderTab = ({ title, id, badge }: Tab, i: number) => (
         <>
             {i !== 0 && !!this.interTabIcon && (