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 --}}

View File

@@ -60,7 +60,7 @@
{{-- New comment form - only for authorized users --}}
@auth
@can('create', \Relaticle\Comments\CommentsConfig::getCommentModel())
<form wire:submit="addComment" class="mt-4">
<div class="mt-4">
{{ $this->commentForm }}
@if (\Relaticle\Comments\CommentsConfig::areAttachmentsEnabled())
@@ -91,14 +91,14 @@
@endif
<div class="mt-2 flex justify-end">
<button type="submit"
<button type="button" wire:click="addComment"
class="inline-flex items-center rounded-lg bg-primary-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:bg-primary-500 dark:hover:bg-primary-400 dark:focus:ring-offset-gray-800"
wire:loading.attr="disabled" wire:target="addComment">
<span wire:loading.remove wire:target="addComment">Comment</span>
<span wire:loading wire:target="addComment">Posting...</span>
</button>
</div>
</form>
</div>
@endcan
@endauth
</div>