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">
|
<div className="flex items-center justify-between mb-1.5">
|
||||||
<label className="text-xs text-kithara-muted">Prompt</label>
|
<label className="text-xs text-kithara-muted">Prompt</label>
|
||||||
<MaestroButton
|
<MaestroButton
|
||||||
prompt={prompt}
|
prompt={prompt || Object.values(structuredPrompt).filter(Boolean).join(' ')}
|
||||||
onResult={(_result, _mode) => {
|
onResult={(_result, _mode) => {
|
||||||
setPrompt(_result)
|
setPrompt(_result)
|
||||||
setError('')
|
setError('')
|
||||||
@@ -211,9 +211,11 @@ export default function Generator({ onGenerate }: Props) {
|
|||||||
<MaestroButton
|
<MaestroButton
|
||||||
prompt={Object.values(structuredPrompt).filter(Boolean).join(' ')}
|
prompt={Object.values(structuredPrompt).filter(Boolean).join(' ')}
|
||||||
structured={isPro}
|
structured={isPro}
|
||||||
onResult={(_result, _mode) => { /* handled by onStructuredResult */ }}
|
onResult={(_result, _mode) => {
|
||||||
|
setPrompt(_result)
|
||||||
|
setError('')
|
||||||
|
}}
|
||||||
onStructuredResult={(fields, mode) => {
|
onStructuredResult={(fields, mode) => {
|
||||||
// Structured mode: merge fields into structuredPrompt, preserving user edits
|
|
||||||
setStructuredPrompt(prev => ({
|
setStructuredPrompt(prev => ({
|
||||||
...prev,
|
...prev,
|
||||||
...Object.fromEntries(
|
...Object.fromEntries(
|
||||||
|
|||||||
@@ -55,6 +55,7 @@ export default function StructuredPromptEditor({ value, onChange }: Props) {
|
|||||||
{filledCount} of {FIELDS.length} fields filled
|
{filledCount} of {FIELDS.length} fields filled
|
||||||
</span>
|
</span>
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
onClick={() => setExpanded(new Set(FIELDS.map(f => f.key)))}
|
onClick={() => setExpanded(new Set(FIELDS.map(f => f.key)))}
|
||||||
className="text-xs text-kithara-accent hover:text-kithara-accent/80 transition-colors"
|
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 (
|
return (
|
||||||
<div key={key} className="border border-white/5 rounded-lg overflow-hidden">
|
<div key={key} className="border border-white/5 rounded-lg overflow-hidden">
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
onClick={() => toggleField(key)}
|
onClick={() => toggleField(key)}
|
||||||
className={`w-full flex items-center justify-between px-3 py-2 text-sm transition-colors ${
|
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'
|
hasValue ? 'bg-white/5' : 'bg-transparent hover:bg-white/5'
|
||||||
|
|||||||
Reference in new issue
Block a user