fix(tabs): fix handleArrowKey func when no tab are active

ovh · Jan 16, 2024 · 6c70007 · 6c70007
1 parent 6a20fac
commit 6c70007
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/packages/components/src/tabs/src/components/osds-tabs/core/controller.ts b/packages/components/src/tabs/src/components/osds-tabs/core/controller.ts
@@ -9,7 +9,7 @@ import type { OsdsTabs } from '../osds-tabs';
 class OdsTabsController {
   protected component: OsdsTabs;
 
-  private _tabItems: (Array<OsdsTabBarItem & HTMLElement>) = [];
+  public _tabItems: (Array<OsdsTabBarItem & HTMLElement>) = [];
 
   public get tabItems(): (Array<OsdsTabBarItem & HTMLElement>) {
     return this._tabItems;
@@ -54,9 +54,14 @@ class OdsTabsController {
 
   handleArrowKey(event: KeyboardEvent): void {
     const currentSelectedTabIndex = this.tabItems.findIndex((tab) => tab.hasAttribute('active'));
-    if(currentSelectedTabIndex === 0 && event.code === 'ArrowLeft' ) {
+    if (currentSelectedTabIndex === -1 || typeof currentSelectedTabIndex === 'undefined' ) {
       return;
     }
+
+    if(currentSelectedTabIndex === 0 && event.code === 'ArrowLeft') {
+      return;
+    }
+
     if(currentSelectedTabIndex === this.tabItems.length - 1 && event.code === 'ArrowRight' ) {
       return;
     }

diff --git a/packages/components/src/tabs/src/components/osds-tabs/osds-tabs.tsx b/packages/components/src/tabs/src/components/osds-tabs/osds-tabs.tsx
@@ -129,9 +129,9 @@ export class OsdsTabs implements OdsTabsAttribute, OdsTabsEvent {
       <Host>
         <div class="tabs-nav-wrap"
              onKeyDown={ this.handleArrowKey.bind(this) }>
-          <slot name='top' onSlotchange={(): Promise<void> => this.handleSlotChange() }/>
+          <slot name='top'/>
         </div>
-        <slot />
+        <slot onSlotchange={(): Promise<void> => this.handleSlotChange() }/>
       </Host>
     );
   }