From 0bcb7ca4d61cf6847afe7cf36b0cbcfb9f5de24c Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Sat, 24 Feb 2024 04:52:07 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20console=20error=20becasue?=
 =?UTF-8?q?=20button=20inside=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/shared/Tabs/Tabs.theme.ts  |  1 +
 .../shared/Tabs/TabsTrigger/TabsTrigger.tsx   | 25 +++++++++++--------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/frontend/src/components/shared/Tabs/Tabs.theme.ts b/packages/frontend/src/components/shared/Tabs/Tabs.theme.ts
index 4261fbb1..86243507 100644
--- a/packages/frontend/src/components/shared/Tabs/Tabs.theme.ts
+++ b/packages/frontend/src/components/shared/Tabs/Tabs.theme.ts
@@ -61,6 +61,7 @@ export const tabsTheme = tv({
       'data-[orientation=horizontal]:focus-ring',
       // Vertical
       'data-[orientation=vertical]:gap-2',
+      'data-[orientation=vertical]:justify-start',
     ],
     triggerList: [
       'flex',
diff --git a/packages/frontend/src/components/shared/Tabs/TabsTrigger/TabsTrigger.tsx b/packages/frontend/src/components/shared/Tabs/TabsTrigger/TabsTrigger.tsx
index 61093bff..6cd70939 100644
--- a/packages/frontend/src/components/shared/Tabs/TabsTrigger/TabsTrigger.tsx
+++ b/packages/frontend/src/components/shared/Tabs/TabsTrigger/TabsTrigger.tsx
@@ -35,20 +35,23 @@ const TabsTrigger = forwardRef<
       // Disabled focus state for horizontal tabs
       tabIndex={orientation === 'horizontal' ? -1 : undefined}
       className={triggerWrapper({ className })}
+      asChild
       {...props}
     >
       {/* Need to add button in the trigger children because there's focus state inside the children */}
-      <button
-        data-orientation={orientation}
-        // Disabled focus state for vertical tabs
-        tabIndex={orientation === 'vertical' ? -1 : undefined}
-        className={trigger()}
-      >
-        {/* Put the icon on the left of the text for veritcal tab */}
-        {orientation === 'vertical' && icon}
-        {children}
-        {/* Put the icon on the right of the text for horizontal tab */}
-        {orientation === 'horizontal' && icon}
+      <button className={triggerWrapper({ className })}>
+        <span
+          // Disabled focus state for vertical tabs
+          tabIndex={orientation === 'horizontal' ? 0 : -1}
+          data-orientation={orientation}
+          className={trigger()}
+        >
+          {/* Put the icon on the left of the text for veritcal tab */}
+          {orientation === 'vertical' && icon}
+          {children}
+          {/* Put the icon on the right of the text for horizontal tab */}
+          {orientation === 'horizontal' && icon}
+        </span>
       </button>
     </Trigger>
   );