dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Check correct prop for section visibility

Browse Source 
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
This commit is contained in:
dwindown
2025-11-20 21:28:01 +07:00
parent 7136b01be4
commit db98102a38
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
admin-spa/src/components/VerticalTabForm.tsx
View File

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