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:
@@ -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',
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user