From 13395b483366e6b9a5d7369c6242dd14ff9b3814 Mon Sep 17 00:00:00 2001
From: verena-ifx <lechneve@ISCN5CG1201S7M.infineon.com>
Date: Wed, 20 Dec 2023 08:44:07 +0100
Subject: [PATCH 1/3] tab event emitted also on click

---
 packages/components/src/components/tabs/tabs.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/tabs/tabs.tsx b/packages/components/src/components/tabs/tabs.tsx
index be834c2bb0..6cc67f0827 100644
--- a/packages/components/src/components/tabs/tabs.tsx
+++ b/packages/components/src/components/tabs/tabs.tsx
@@ -144,6 +144,12 @@ export class IfxTabs {
     return `tab-item ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`;
   }
 
+  private handleClick(tab, index) {
+    this.ifxTabChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: index })
+    if (!tab.disabled) this.internalActiveTabIndex = index;
+
+  }
+
   @Listen('keydown')
   handleKeyDown(ev: KeyboardEvent) {
     if (ev.key === 'Tab') {
@@ -185,7 +191,7 @@ export class IfxTabs {
               class={this.getTabItemClass(index)}
               ref={(el) => (this.tabHeaderRefs[index] = el)}
               tabindex="0"
-              onClick={() => { if (!tab.disabled) this.internalActiveTabIndex = index; }}
+              onClick={() => this.handleClick(tab, index)}
               aria-selected={index === this.internalActiveTabIndex ? 'true' : 'false'}
               aria-disabled={tab.disabled ? 'true' : 'false'}
               role="tab"

From 934281a05e6c1b29e468898b95ec842f42350862 Mon Sep 17 00:00:00 2001
From: verena-ifx <lechneve@ISCN5CG1201S7M.infineon.com>
Date: Wed, 20 Dec 2023 16:13:02 +0100
Subject: [PATCH 2/3] tab event firing on click, set from outside and keypress

---
 .../components/src/components/tabs/tabs.tsx    | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/components/src/components/tabs/tabs.tsx b/packages/components/src/components/tabs/tabs.tsx
index 6cc67f0827..21a3a759e5 100644
--- a/packages/components/src/components/tabs/tabs.tsx
+++ b/packages/components/src/components/tabs/tabs.tsx
@@ -1,5 +1,5 @@
 //ifxTabs.tsx
-import { Component, h, Prop, State, Element, Listen, Watch, Event, EventEmitter } from '@stencil/core';
+import { Component, h, Prop, State, Element, Listen, Event, EventEmitter } from '@stencil/core';
 
 
 @Component({
@@ -26,18 +26,15 @@ export class IfxTabs {
 
   componentWillLoad() {
     this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';
+    if (this.internalActiveTabIndex !== this.activeTabIndex) {
+      this.ifxTabChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: this.activeTabIndex });
+    };
     this.internalActiveTabIndex = this.activeTabIndex;
     this.internalFocusedTabIndex = this.internalActiveTabIndex;
+    this.updateTabStyles();
   }
 
-  @Watch('activeTabIndex')
-  activeTabIndexChanged(newValue: number, oldValue: number) {
-    if (newValue !== oldValue) {
-      this.internalActiveTabIndex = newValue;
-      this.ifxTabChange.emit({ previousTab: oldValue, currentTab: newValue });
-      this.updateTabStyles();
-    }
-  }
+
 
 
   updateTabStyles() {
@@ -82,7 +79,6 @@ export class IfxTabs {
     this.tabRefs = Array.from(tabs);
     this.tabRefs.forEach((tab, index) => {
       tab.setAttribute('slot', `tab-${index}`);
-      tab.tabIndex = index === this.internalActiveTabIndex ? 0 : -1;
     });
   }
 
@@ -150,6 +146,8 @@ export class IfxTabs {
 
   }
 
+
+
   @Listen('keydown')
   handleKeyDown(ev: KeyboardEvent) {
     if (ev.key === 'Tab') {

From 6397ffdcc122063a1adc2d2f58741cd4e6fb445c Mon Sep 17 00:00:00 2001
From: "Yanchev Tihomir (IT ERP DXT / EE)" <Tihomir.Yanchev-EE@infineon.com>
Date: Mon, 15 Jan 2024 09:23:45 +0100
Subject: [PATCH 3/3] moved onSlotChange into componentWillLoad

---
 packages/components/src/components/tabs/tabs.tsx | 2 +-
 packages/components/src/index.html               | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/tabs/tabs.tsx b/packages/components/src/components/tabs/tabs.tsx
index d703a02605..77402b1730 100644
--- a/packages/components/src/components/tabs/tabs.tsx
+++ b/packages/components/src/components/tabs/tabs.tsx
@@ -32,6 +32,7 @@ export class IfxTabs {
     this.internalActiveTabIndex = this.activeTabIndex;
     this.internalFocusedTabIndex = this.internalActiveTabIndex;
     this.updateTabStyles();
+    this.onSlotChange();
   }
 
   updateTabStyles() {
@@ -89,7 +90,6 @@ export class IfxTabs {
   }
 
   componentDidLoad() {
-    this.onSlotChange();
     this.updateBorderAndFocus();
   }
 
diff --git a/packages/components/src/index.html b/packages/components/src/index.html
index 845d4b6a5e..2fe54dc9b1 100644
--- a/packages/components/src/index.html
+++ b/packages/components/src/index.html
@@ -14,13 +14,13 @@
   </style>
 
   <script defer>
-    
+
   </script>
 
 </head>
 
 <body>
-  
+
 </body>
 
 </html>
\ No newline at end of file