Livewire add comment modal component

Question

I'm struggling to get a form parameter submitted to a livewire modal. I'm using laravel9 with php8.1 and have installed wire-elements/modal via composer (v1.0.6) I followed this guide.

So I have a modal.blade.php file in my view components folder with the following:

@props(['formAction' => false])

<div>
    @if($formAction)
        <form wire:submit.prevent="{{ $formAction }}">
            @endif
            <div class="bg-white p-4 sm:px-6 sm:py-4 border-b border-gray-150">
                @if(isset($title))
                    <h3 class="text-lg leading-6 font-medium text-gray-900">
                        {{ $title }}
                    </h3>
                @endif
            </div>
            <div class="bg-white px-4 sm:p-6">
                <div class="space-y-6">
                    {{ $content }}
                </div>
            </div>

            <div class="bg-white px-4 pb-5 sm:px-4 sm:flex">
                {{ $buttons }}
            </div>
            @if($formAction)
        </form>
    @endif
</div>

On my test page I have a link to open the Modal which contains a text area for the comment:

        <x-jet-button wire:click="$emit( 'openModal', 'add-comment',{{ json_encode(['job_number' => $job->number]) }} )">
            {{ __('Add') }}
        </x-jet-button>

The livewire component is as follows: (add-comment.blade.php)

<x-modal formAction="create">
    <x-slot name="title">
        Add a Comment
    </x-slot>

    <x-slot name="content">
        <label for="comment">Comment Narrative:</label>
        <textarea id="comment" name="comment" rows="4" cols="36"></textarea>
    </x-slot>

    <x-slot name="buttons">
        <x-jet-button class="mx-2" type="submit">
            {{ __('Submit') }}
        </x-jet-button>
        <x-jet-button type="button" class="mx-2" wire:click="$emit('closeModal')">
            {{ __('Close') }}
        </x-jet-button>
    </x-slot>
</x-modal>

(AddComment.php)

<?php

namespace App\Http\Livewire;

use App\Models\JobComment;
use Illuminate\Support\Facades\Auth;
use LivewireUI\Modal\ModalComponent;

class AddComment extends ModalComponent
{
    public string $comment = '';
    public int $job_number;

    protected $listeners =['refresh' => '$refresh'];

    public function render()
    {
        return view('livewire.add-comment');
    }

    public function create()
    {
        $comment             = new JobComment();
        $comment->comment    = $this->comment;
        $comment->job_number = $this->job_number;
        $comment->user_id    = Auth::id();
        $comment->save();

        $this->closeModal();
    }

    public static function closeModalOnEscape(): bool
    {
        return false;
    }

    public static function destroyOnClose(): bool
    {
        return true;
    }
}

When i click the button on my test page the modal appears and has the desired content. If I enter some text in the textarea and click the submit a new comment is added to the database but the comment itself is an empty string.

In addition if I click the close button on this form I am unable to reopen the modal but if I click outside the modal it closes and can be opened again (but saving this comment is the issue here).

I have tried using true instead of false in the modal.blade.php file (@props(['formAction' => true])) but it made no difference and my comment is empty

Any ideas?

Answer 1

So with this the issue was i hadn't binded to the model so I amended the text area element to this

<textarea wire:model.defer="comment" id="comment" rows="4" cols="36">