From db98102a38147148005af67190b61f653d69099e Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Thu, 20 Nov 2025 21:28:01 +0700
Subject: [PATCH] fix: Check correct prop for section visibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Root cause: Wrong prop check
- Was checking: child.props['data-section-id']
- Should check: child.props.id

Why this matters:
- FormSection receives 'id' as a React prop
- 'data-section-id' is only a DOM attribute
- React.Children.map sees React props, not DOM attributes
- So child.props['data-section-id'] was always undefined
- Condition never matched, no hidden class applied
- All sections stayed visible

Fix:
- Check child.props.id instead
- Cast to string for type safety
- Now condition matches correctly
- Hidden class applied to inactive sections

Result:
✅ Only active section visible
✅ Works on desktop and mobile
✅ Simple one-line fix per location
---
 admin-spa/src/components/VerticalTabForm.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/admin-spa/src/components/VerticalTabForm.tsx b/admin-spa/src/components/VerticalTabForm.tsx
index ff73297..6953e10 100644
--- a/admin-spa/src/components/VerticalTabForm.tsx
+++ b/admin-spa/src/components/VerticalTabForm.tsx
@@ -119,8 +119,8 @@ export function VerticalTabForm({ tabs, children, className }: VerticalTabFormPr
           className="flex-1 overflow-y-auto pr-2"
         >
           {React.Children.map(children, (child) => {
-            if (React.isValidElement(child) && child.props['data-section-id']) {
-              const sectionId = child.props['data-section-id'];
+            if (React.isValidElement(child) && child.props.id) {
+              const sectionId = child.props.id as string;
               const isActive = sectionId === activeTab;
               const originalClassName = child.props.className || '';
               return React.cloneElement(child as React.ReactElement<any>, {
@@ -136,8 +136,8 @@ export function VerticalTabForm({ tabs, children, className }: VerticalTabFormPr
       {/* Mobile: Content Area */}
       <div className="lg:hidden">
         {React.Children.map(children, (child) => {
-          if (React.isValidElement(child) && child.props['data-section-id']) {
-            const sectionId = child.props['data-section-id'];
+          if (React.isValidElement(child) && child.props.id) {
+            const sectionId = child.props.id as string;
             const isActive = sectionId === activeTab;
             const originalClassName = child.props.className || '';
             return React.cloneElement(child as React.ReactElement<any>, {