fix: Add type="button" to tab buttons to prevent form submission

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
This commit is contained in:
dwindown
2025-11-20 21:32:24 +07:00
parent db98102a38
commit d0f15b4f62
2 changed files with 3 additions and 1 deletions

View File

@@ -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',

View File

@@ -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>