fix: prevent accordion buttons from submitting form
Buttons inside <form> default to type='submit'. Clicking to collapse/expand a structured prompt field was triggering the form's submit handler, which fires audio generation. Added explicit type='button' to all non-submit buttons in StructuredPromptEditor.
This commit is contained in:
1 parent
78c13ccf01
commit
dbe42f2e88
2 files changed
+7
-3
No files matched your search
@@ -186,7 +186,7 @@ export default function Generator({ onGenerate }: Props) {
|
||||
<div className="flex items-center justify-between mb-1.5">
|
||||
<label className="text-xs text-kithara-muted">Prompt</label>
|
||||
<MaestroButton
|
||||
prompt={prompt}
|
||||
prompt={prompt || Object.values(structuredPrompt).filter(Boolean).join(' ')}
|
||||
onResult={(_result, _mode) => {
|
||||
setPrompt(_result)
|
||||
setError('')
|
||||
@@ -211,9 +211,11 @@ export default function Generator({ onGenerate }: Props) {
|
||||
<MaestroButton
|
||||
prompt={Object.values(structuredPrompt).filter(Boolean).join(' ')}
|
||||
structured={isPro}
|
||||
onResult={(_result, _mode) => { /* handled by onStructuredResult */ }}
|
||||
onResult={(_result, _mode) => {
|
||||
setPrompt(_result)
|
||||
setError('')
|
||||
}}
|
||||
onStructuredResult={(fields, mode) => {
|
||||
// Structured mode: merge fields into structuredPrompt, preserving user edits
|
||||
setStructuredPrompt(prev => ({
|
||||
...prev,
|
||||
...Object.fromEntries(
|
||||
|
||||
@@ -55,6 +55,7 @@ export default function StructuredPromptEditor({ value, onChange }: Props) {
|
||||
{filledCount} of {FIELDS.length} fields filled
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setExpanded(new Set(FIELDS.map(f => f.key)))}
|
||||
className="text-xs text-kithara-accent hover:text-kithara-accent/80 transition-colors"
|
||||
>
|
||||
@@ -69,6 +70,7 @@ export default function StructuredPromptEditor({ value, onChange }: Props) {
|
||||
return (
|
||||
<div key={key} className="border border-white/5 rounded-lg overflow-hidden">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleField(key)}
|
||||
className={`w-full flex items-center justify-between px-3 py-2 text-sm transition-colors ${
|
||||
hasValue ? 'bg-white/5' : 'bg-transparent hover:bg-white/5'
|
||||
|
||||
Reference in new issue
Block a user