fix: theme picker buttons no longer submit the parent form (#326)
Every <button> inside ThemeCustomizerEnhanced was bare — no `type`
attribute, defaulting to `type="submit"`. Inside CreateEventPage's
<form onSubmit={handleSubmit}>, that turned every theme/layout/header/
divider/control/colour-mode/CSS-template click into a form submission.
When the form was empty, validation killed the submit silently — that
showed up earlier as #317.2 ("theme picker unclickable").
When the form was filled (event_name set, etc.), validation passed,
`createMutation.mutate(payload)` ran, and the user was navigated to a
freshly-created event they never asked for — #326's reported symptom.
Fix: add `type="button"` to all 9 unmarked <button>s in the customizer.
Also covered by smoke spec 09-create-event-no-instant-submit which fills
the form, clicks Modern Masonry, and asserts the URL stays on
/admin/events/new and the events count is unchanged.
This commit is contained in:
@@ -199,6 +199,7 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
|
|||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
{Object.entries(GALLERY_THEME_PRESETS).map(([key, theme]) => (
|
{Object.entries(GALLERY_THEME_PRESETS).map(([key, theme]) => (
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
key={key}
|
key={key}
|
||||||
onClick={() => handlePresetSelect(key)}
|
onClick={() => handlePresetSelect(key)}
|
||||||
className={`relative p-4 rounded-lg border-2 transition-all text-left ${
|
className={`relative p-4 rounded-lg border-2 transition-all text-left ${
|
||||||
@@ -281,6 +282,7 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
|
|||||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
{(Object.keys(layoutIcons) as GalleryLayoutType[]).map((layout) => (
|
{(Object.keys(layoutIcons) as GalleryLayoutType[]).map((layout) => (
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
key={layout}
|
key={layout}
|
||||||
onClick={() => handleChange('galleryLayout', layout)}
|
onClick={() => handleChange('galleryLayout', layout)}
|
||||||
className={`relative p-4 rounded-lg border-2 transition-all ${
|
className={`relative p-4 rounded-lg border-2 transition-all ${
|
||||||
@@ -627,6 +629,7 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
|
|||||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
{(Object.keys(headerStyleIcons) as HeaderStyleType[]).map((style) => (
|
{(Object.keys(headerStyleIcons) as HeaderStyleType[]).map((style) => (
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
key={style}
|
key={style}
|
||||||
onClick={() => handleChange('headerStyle', style)}
|
onClick={() => handleChange('headerStyle', style)}
|
||||||
className={`relative p-4 rounded-lg border-2 transition-all ${
|
className={`relative p-4 rounded-lg border-2 transition-all ${
|
||||||
@@ -665,6 +668,7 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
|
|||||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
|
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
|
||||||
{(Object.keys(dividerStylePreviews) as HeroDividerStyle[]).map((divider) => (
|
{(Object.keys(dividerStylePreviews) as HeroDividerStyle[]).map((divider) => (
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
key={divider}
|
key={divider}
|
||||||
onClick={() => handleChange('heroDividerStyle', divider)}
|
onClick={() => handleChange('heroDividerStyle', divider)}
|
||||||
className={`relative p-3 rounded-lg border-2 transition-all ${
|
className={`relative p-3 rounded-lg border-2 transition-all ${
|
||||||
@@ -705,6 +709,7 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
|
|||||||
</p>
|
</p>
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
onClick={() => handleChange('controlsStyle', 'classic')}
|
onClick={() => handleChange('controlsStyle', 'classic')}
|
||||||
className={`relative p-4 rounded-lg border-2 transition-all ${
|
className={`relative p-4 rounded-lg border-2 transition-all ${
|
||||||
(localTheme.controlsStyle || 'classic') === 'classic'
|
(localTheme.controlsStyle || 'classic') === 'classic'
|
||||||
@@ -728,6 +733,7 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
|
|||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
onClick={() => handleChange('controlsStyle', 'sidebar')}
|
onClick={() => handleChange('controlsStyle', 'sidebar')}
|
||||||
className={`relative p-4 rounded-lg border-2 transition-all ${
|
className={`relative p-4 rounded-lg border-2 transition-all ${
|
||||||
localTheme.controlsStyle === 'sidebar'
|
localTheme.controlsStyle === 'sidebar'
|
||||||
@@ -778,6 +784,7 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
|
|||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
{(['light', 'dark', 'auto'] as const).map((mode) => (
|
{(['light', 'dark', 'auto'] as const).map((mode) => (
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
key={mode}
|
key={mode}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
handleChange('colorMode', mode);
|
handleChange('colorMode', mode);
|
||||||
@@ -1037,6 +1044,7 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
|
|||||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||||
{/* No template option */}
|
{/* No template option */}
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
onClick={() => onCssTemplateChange(null)}
|
onClick={() => onCssTemplateChange(null)}
|
||||||
className={`relative p-4 rounded-lg border-2 transition-all text-left ${
|
className={`relative p-4 rounded-lg border-2 transition-all text-left ${
|
||||||
!cssTemplateId
|
!cssTemplateId
|
||||||
@@ -1057,6 +1065,7 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
|
|||||||
{/* Template options */}
|
{/* Template options */}
|
||||||
{cssTemplates.map((template) => (
|
{cssTemplates.map((template) => (
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
key={template.id}
|
key={template.id}
|
||||||
onClick={() => onCssTemplateChange(template.id)}
|
onClick={() => onCssTemplateChange(template.id)}
|
||||||
className={`relative p-4 rounded-lg border-2 transition-all text-left ${
|
className={`relative p-4 rounded-lg border-2 transition-all text-left ${
|
||||||
|
|||||||
Reference in New Issue
Block a user