fix(components): prevent postChange event emitting before post-tabs l…

…oads
swisspost · Jul 10, 2024 · 39b9a4f · 39b9a4f
1 parent defaff4
commit 39b9a4f
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 11 deletions.
diff --git a/.changeset/fifty-peaches-turn.md b/.changeset/fifty-peaches-turn.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Prevent the `post-tabs` component from triggering a `post Change` event before it is loaded.
diff --git a/packages/components/src/components/post-tabs/post-tabs.tsx b/packages/components/src/components/post-tabs/post-tabs.tsx
@@ -74,23 +74,17 @@ export class PostTabs {
     }
 
     // hide the currently visible panel only if no other animation is running
-    if (previousTab && !this.showing && !this.hiding) {
-      this.hidePanel(previousTab.panel);
-    }
+    if (previousTab && !this.showing && !this.hiding) this.hidePanel(previousTab.panel);
 
     // wait for any hiding animation to complete before showing the selected tab
-    if (this.hiding) {
-      await this.hiding.finished;
-    }
+    if (this.hiding) await this.hiding.finished;
 
     this.showSelectedPanel();
 
     // wait for any display animation to complete for the returned promise to fully resolve
-    if (this.showing) {
-      await this.showing.finished;
-    }
+    if (this.showing) await this.showing.finished;
 
-    this.postChange.emit(this.activeTab.panel);
+    if (this.isLoaded) this.postChange.emit(this.activeTab.panel);
   }
 
   private moveMisplacedTabs() {

diff --git a/packages/components/src/index.html b/packages/components/src/index.html
@@ -13,6 +13,20 @@
     <script nomodule src="/build/post-components.js"></script>
   </head>
   <body>
-    <div class="p-5">Add your component here and start developing!</div>
+    <post-tabs>
+      <post-tab-header slot="tabs" panel="unua">Unua langeto</post-tab-header>
+      <post-tab-header slot="tabs" panel="dua">Dua langeto</post-tab-header>
+      <post-tab-header slot="tabs" panel="tria">Tria langeto</post-tab-header>
+
+      <post-tab-panel name="unua">
+        Jen la enhavo de la unua langeto. Defaŭlte ĝi montriĝas komence.
+      </post-tab-panel>
+      <post-tab-panel name="dua">
+        Jen la enhavo de la dua langeto. Defaŭlte ĝi estas kaŝita komence.
+      </post-tab-panel>
+      <post-tab-panel name="tria">
+        Jen la enhavo de la tria langeto. Defaŭlte ĝi ankaŭ estas kaŝita komence.
+      </post-tab-panel>
+    </post-tabs>
   </body>
 </html>