From 27d12f47a179361e75f1d85a718994f196c9e969 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Thu, 20 Nov 2025 21:55:25 +0700
Subject: [PATCH] fix: Update activeTab when tabs array changes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Issue: Blank form when tabs change dynamically

Problem:
- When product type changes (simple → variable)
- Tabs array changes (adds/removes variations tab)
- activeTab state still points to old tab ID
- If old tab ID doesn't exist, no section shows
- Result: Blank form

Fix:
- Added useEffect to watch tabs array
- Check if current activeTab exists in new tabs
- If not, reset to first tab (tabs[0].id)
- Ensures valid activeTab always

Example:
- Initial: tabs = [general, inventory, organization]
- activeTab = 'general' ✅
- Type changes to variable
- New tabs = [general, inventory, variations, organization]
- activeTab still 'general' ✅ (exists, no change)
- But if activeTab was 'variations' and type changed to simple
- Old activeTab 'variations' doesn't exist
- Reset to 'general' ✅

Result:
✅ Form always shows active section
✅ Handles dynamic tab changes
✅ No blank forms
---
 admin-spa/src/components/VerticalTabForm.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/admin-spa/src/components/VerticalTabForm.tsx b/admin-spa/src/components/VerticalTabForm.tsx
index 274e32d..183e2b8 100644
--- a/admin-spa/src/components/VerticalTabForm.tsx
+++ b/admin-spa/src/components/VerticalTabForm.tsx
@@ -18,6 +18,13 @@ export function VerticalTabForm({ tabs, children, className }: VerticalTabFormPr
   const contentRef = useRef<HTMLDivElement>(null);
   const sectionRefs = useRef<{ [key: string]: HTMLElement }>({});
 
+  // Update activeTab when tabs change (e.g., product type changes)
+  useEffect(() => {
+    if (tabs.length > 0 && !tabs.find(t => t.id === activeTab)) {
+      setActiveTab(tabs[0].id);
+    }
+  }, [tabs, activeTab]);
+
   // Scroll spy - update active tab based on scroll position
   useEffect(() => {
     const handleScroll = () => {