Merge pull request #98 from kirschbaum-development/fix/77-nested-form-modal

fix: drop nested `<form>` wrapper from comments composer (#77)

Author: lisa-fehr

resources/lang/ar/comments.php

@@ -3,6 +3,7 @@
 return [
     'label' => 'التعليقات',
     'placeholder' => 'اكتب تعليقك…',
+    'add_comment' => 'أضف تعليقًا',
     'no_comments_yet' => 'لا توجد تعليقات .',
 
     'user_avatar_alt' => 'صورة المستخدم ',

resources/lang/en/comments.php

@@ -3,6 +3,7 @@
 return [
     'label' => 'Comments',
     'placeholder' => 'Type your comment…',
+    'add_comment' => 'Add a comment',
     'no_comments_yet' => 'No comments yet.',
 
     'user_avatar_alt' => 'User Avatar',

resources/lang/es/comments.php

@@ -3,6 +3,7 @@
 return [
     'label' => 'Comentarios',
     'placeholder' => 'Escribe tu comentario...',
+    'add_comment' => 'Añadir un comentario',
     'no_comments_yet' => 'Aún no hay comentarios.',
 
     'user_avatar_alt' => 'Avatar de usuario',

resources/lang/fr/comments.php

@@ -3,6 +3,7 @@
 return [
     'label' => 'Commentaires',
     'placeholder' => 'Rédiger votre commentaire...',
+    'add_comment' => 'Ajouter un commentaire',
     'no_comments_yet' => 'Aucun commentaire pour le moment.',
 
     'user_avatar_alt' => 'Avatar de l\'utilisateur',

resources/lang/nl/comments.php

@@ -2,6 +2,7 @@
 
 return [
     'label' => 'Opmerkingen',
+    'add_comment' => 'Een opmerking toevoegen',
     'no_comments_yet' => 'Nog geen opmerkingen.',
 
     'user_avatar_alt' => 'Profielfoto',

resources/lang/ro/comments.php

@@ -3,6 +3,7 @@
 return [
     'label' => 'Comentarii',
     'placeholder' => 'Scrie comentariul tău...',
+    'add_comment' => 'Adaugă un comentariu',
     'no_comments_yet' => 'Niciun comentariu încă.',
 
     'user_avatar_alt' => 'Avatar',

resources/views/comments.blade.php

@@ -4,7 +4,7 @@
     {{-- Main Comments Area --}}
     <div class="comm:flex-1 comm:space-y-2">
         @if (Config::resolveAuthenticatedUser()?->can('create', Config::getCommentModel()))
-            <form wire:submit.prevent="save" x-cloak>
+            <div x-cloak role="form" aria-label="{{ __('commentions::comments.add_comment') }}">
                 {{-- tiptap editor --}}
                 <div class="comm:relative tip-tap-container comm:mb-2" x-on:click="wasFocused = true" wire:ignore>
                     <div
@@ -29,7 +29,7 @@
                     >{{ __('commentions::comments.cancel') }}</x-filament::button>
                 </div>
             </template>
-        </form>
+        </div>
     @endif
 
         <livewire:dynamic-component

tests/Livewire/CommentsTest.php

@@ -83,6 +83,21 @@
     Event::assertNotDispatched(CommentWasCreatedEvent::class);
 });
 
+test('comments composer does not render a form element', function () {
+    /** @var User $user */
+    $user = User::factory()->create();
+    actingAs($user);
+
+    $post = Post::factory()->create();
+
+    livewire(Comments::class, [
+        'record' => $post,
+    ])
+        ->assertDontSeeHtml('<form')
+        ->assertSeeHtml('role="form"')
+        ->assertSeeHtml('wire:click="save"');
+});
+
 test('comments editor includes prefixed component alias', function () {
     /** @var User $user */
     $user = User::factory()->create();