fix: replace form elements with div+wire:click to prevent nested form conflicts

The CommentsAction slide-over wraps content in a Filament action form.
Nested <form> elements inside the comments Livewire templates caused the
browser to submit the outer action form instead, closing the slide-over
without storing the comment.

Replace <form wire:submit> with <div> and type="submit" buttons with
type="button" wire:click for all three forms (comment, edit, reply).
This commit is contained in:
manukminasyan
2026-03-27 21:04:34 +04:00
parent 6c96fb900b
commit ac97dcb092
2 changed files with 9 additions and 9 deletions

View File

@@ -32,13 +32,13 @@
{{-- Body or edit form --}}
@if ($isEditing)
<form wire:submit="saveEdit" class="mt-1">
<div class="mt-1">
{{ $this->editForm }}
<div class="mt-2 flex gap-2">
<button type="submit" class="text-sm font-medium text-primary-600 hover:text-primary-500 dark:text-primary-400">Save</button>
<button type="button" wire:click="saveEdit" class="text-sm font-medium text-primary-600 hover:text-primary-500 dark:text-primary-400">Save</button>
<button type="button" wire:click="cancelEdit" class="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400">Cancel</button>
</div>
</form>
</div>
@else
<div class="fi-prose prose prose-sm mt-1 max-w-none text-gray-700 dark:prose-invert dark:text-gray-300">
{!! $comment->renderBodyWithMentions() !!}
@@ -104,7 +104,7 @@
{{-- Reply form --}}
@if ($isReplying)
<form wire:submit="addReply" class="mt-3">
<div class="mt-3">
{{ $this->replyForm }}
@if (\Relaticle\Comments\CommentsConfig::areAttachmentsEnabled())
@@ -135,10 +135,10 @@
@endif
<div class="mt-2 flex gap-2">
<button type="submit" class="text-sm font-medium text-primary-600 hover:text-primary-500 dark:text-primary-400">Reply</button>
<button type="button" wire:click="addReply" class="text-sm font-medium text-primary-600 hover:text-primary-500 dark:text-primary-400">Reply</button>
<button type="button" wire:click="cancelReply" class="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400">Cancel</button>
</div>
</form>
</div>
@endif
{{-- Nested replies --}}