From d0f15b4f62f38d668cc5607002e2019aaf4b08b3 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Thu, 20 Nov 2025 21:32:24 +0700
Subject: [PATCH] fix: Add type="button" to tab buttons to prevent form
 submission
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Critical bug: Tab buttons were submitting the form

Problem:
- Buttons inside <form> default to type="submit"
- Clicking any tab triggered form submission
- Form would submit instead of switching tabs
- Very disruptive UX

Fix:
- Added type="button" to all tab buttons
- Mobile horizontal tabs
- Desktop vertical tabs
- Now tabs only switch sections, no submit

Changes:
1. Mobile tab buttons: type="button"
2. Desktop tab buttons: type="button"

Result:
✅ Tabs switch sections without submitting
✅ Form only submits via submit button
✅ Proper form behavior
---
 admin-spa/src/components/VerticalTabForm.tsx | 2 ++
 admin-spa/src/routes/Products/index.tsx      | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/admin-spa/src/components/VerticalTabForm.tsx b/admin-spa/src/components/VerticalTabForm.tsx
index 6953e10..274e32d 100644
--- a/admin-spa/src/components/VerticalTabForm.tsx
+++ b/admin-spa/src/components/VerticalTabForm.tsx
@@ -73,6 +73,7 @@ export function VerticalTabForm({ tabs, children, className }: VerticalTabFormPr
           {tabs.map((tab) => (
             <button
               key={tab.id}
+              type="button"
               onClick={() => scrollToSection(tab.id)}
               className={cn(
                 'flex-shrink-0 px-4 py-2 rounded-md text-sm font-medium transition-colors',
@@ -97,6 +98,7 @@ export function VerticalTabForm({ tabs, children, className }: VerticalTabFormPr
             {tabs.map((tab) => (
               <button
                 key={tab.id}
+                type="button"
                 onClick={() => scrollToSection(tab.id)}
                 className={cn(
                   'w-full text-left px-4 py-2.5 rounded-md text-sm font-medium transition-colors',
diff --git a/admin-spa/src/routes/Products/index.tsx b/admin-spa/src/routes/Products/index.tsx
index cf18350..75b4f27 100644
--- a/admin-spa/src/routes/Products/index.tsx
+++ b/admin-spa/src/routes/Products/index.tsx
@@ -379,7 +379,7 @@ export default function Products() {
                             <Package className="w-5 h-5 text-muted-foreground" />
                           </div>
                         )}
-                        <Link to={`/products/${product.id}`} className="font-medium hover:underline">
+                        <Link to={`/products/${product.id}/edit`} className="font-medium hover:underline">
                           {product.name}
                         </Link>
                       </div>