athphane/relaticle-comments
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

12
resources/views/livewire/comment-item.blade.php
View File

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

6
resources/views/livewire/comments.blade.php
View File

@@ -60,7 +60,7 @@
{{-- New comment form - only for authorized users --}} {{-- New comment form - only for authorized users --}}
@auth @auth
@can('create', \Relaticle\Comments\CommentsConfig::getCommentModel()) @can('create', \Relaticle\Comments\CommentsConfig::getCommentModel())
<form wire:submit="addComment" class="mt-4"> <div class="mt-4">
{{ $this->commentForm }} {{ $this->commentForm }}
@if (\Relaticle\Comments\CommentsConfig::areAttachmentsEnabled()) @if (\Relaticle\Comments\CommentsConfig::areAttachmentsEnabled())
@@ -91,14 +91,14 @@
@endif @endif
<div class="mt-2 flex justify-end"> <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" 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"> wire:loading.attr="disabled" wire:target="addComment">
<span wire:loading.remove wire:target="addComment">Comment</span> <span wire:loading.remove wire:target="addComment">Comment</span>
<span wire:loading wire:target="addComment">Posting...</span> <span wire:loading wire:target="addComment">Posting...</span>
</button> </button>
</div> </div>
</form> </div>
@endcan @endcan
@endauth @endauth
</div> </div>