Form content with wire:model inside modal is not being loaded when using hasMany items, whereas without it works without problems

[hooft99]

Livewire version

v3.1.0

Which PHP version are you using?

PHP 8.2

Repository URL

No response

Steps To Reproduce

Watch video, this demonstrates the issue: https://youtu.be/C-Oy9adrj30
I have used this method in many project in livewire v2 without any problems. I also downgraded my version to v2 to check if the issue was resolved there, and it was.

The issue in writing: I have a form that I fill in with a hasMany relationship. The form is opened from an index livewire controller. The first time it loads the page and I click on edit, the modal opens and the form fields are filled. I then close the modal and cleanup all variables in the form livewire controller. I then click on edit once again, and only the hasMany relationship is loaded. The variables from the main model are not filled in the form. The Laravel debug bar shows the request and that request shows that the data was indeed fetched. Also when showing the variable directly without wire:model it shows the correct value for the variable. I also have the same form without the hasMany relationship and there is no issue there.
Hopefully there is a fix available for this problem.

Code used (index Livewire controller):

<?php

namespace App\Livewire\Management\Category;

use Livewire\WithPagination;
use Livewire\Component;
use Auth;
use App\Models\{
    Category,
};
use Livewire\Attributes\On;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Str;


class Index extends Component
{
    use WithPagination;
    protected $paginationTheme = 'bootstrap';
    public $paginationItemsAmount = 30;

    public $selectedItem, $edit;

    public function showItem($itemID, $edit)
        {
            $this->selectedItem = $itemID;
            $this->edit = ($edit == 1 ? 1 : 0);
            $this->dispatch('getModelId', $this->selectedItem, $this->edit)->to('management.category.form');
        }
    
        #[On('openModalIndex')] 
        public function openModalIndex()
        {
            $this->dispatch('openModal');
        }
}

Code used (form Livewire controller):

<?php

namespace App\Livewire\Management\Category;

use Livewire\Component;
use App\Models\{
    Category,
    Tag,
};
use Auth;
use Livewire\Attributes\On;
use Illuminate\Validation\Rule;
use Illuminate\Support\Facades\DB;


class Form extends Component
{
    // Default model properties
    public $name, $enabled, $type, $icon, $order, $updated_at, $created_at, $modelId, $edit = 1;

    // Tags
    public $tags = [];
    public $tag_id, $tag_name, $tag_enabled, $tag_updated_at, $tag_created_at;
    public $tags_to_be_removed = [];

    protected function rules()
    {
        return [
            'name' => 'required|string|min:2|' . Rule::unique('categories', 'name')->ignore($this->modelId, 'id'),
            'enabled' => 'nullable|boolean',
            'type' => 'required|in:radio,checkbox',
            'icon' => 'required|string|max:255',
            'tags' => 'array',
            'tag_name.*' => 'required|string|max:255',
            'tag_enabled.*' => 'nullable|boolean'
        ];
    }

    protected $validationAttributes = [
        'name' => 'naam',
        'enabled' => 'ingeschakeld',
        'type' => 'type',
        'icon' => 'icon',
        'tags' => 'tags',
        'tags.*' => 'tag',
        'tag_name.*' => 'naam',
        'tag_enabled.*' => 'ingeschakeld'

    ];

    public function removeTag($index)
    {
        if (isset($this->tag_id[$index])) {
            $this->tags_to_be_removed[] = $this->tag_id[$index];
        }
        unset($this->tags[$index], $this->tag_id[$index], $this->tag_name[$index], $this->tag_enabled[$index]);
    }

    public function addTag()
    {
        $this->tags[] = '';
        $this->tag_name[array_key_last($this->tags)] = '';
        $this->tag_enabled[array_key_last($this->tags)] = true;
    }

    public function updated($propertyName)
    {
        $this->validateOnly($propertyName);
    }

    public function updatedIcon()
    {
        if(!str_contains($this->icon, 'fa-')) {
            $this->icon = 'fa-' . $this->icon;
        }
    }

    public function updatedName()
    {
        $this->name = ucfirst($this->name);
    }

    #[On('getModelId')] 
    public function getModelId($modelId, $edit)
    {
        $this->edit = $edit;
        $this->modelId = $modelId;
        $model = Category::with('tags_ordered')->findOrFail($modelId);
        if ($edit === 0) {
            $this->updated_at= $model->updated_at->format('d-m-Y | H:i');
            $this->created_at = $model->created_at->format('d-m-Y | H:i');
        }        
        $this->name = $model->name;
        $this->enabled = ($model->enabled == 1 ? true : false);
        $this->type = $model->type;
        $this->icon = $model->icon;
        $this->order = $model->order;
        foreach ($model->tags_ordered as $index => $tag) {
            $this->tags[] = '';
            $this->tag_id[$index] = $tag->id;
            $this->tag_name[$index] = $tag->name;
            $this->tag_enabled[$index] = ($tag->enabled == 1 ? true : false);
            if ($edit === 0) {
                $this->tag_updated_at[$index] = $tag->updated_at->format('d-m-Y | H:i');
                $this->tag_created_at[$index] = $tag->created_at->format('d-m-Y | H:i');
            }
        }
        $this->dispatch('openModalIndex')->to('management.category.index');
    }   

    public function store()
    {
        $this->validate();

        if (!$this->modelId) {
            $this->order = Category::max('order') + 1;
        }

        try {
            DB::transaction(function () {
                $category = Category::updateOrCreate(
                    ['id' => $this->modelId],
                    [
                        'name' => $this->name,
                        'enabled' => $this->enabled,
                        'type' => $this->type,
                        'icon' => $this->icon,
                        'order' => $this->order,
                    ]
                );

                $this->modelId = $category->id;

                if (count($this->tags_to_be_removed) > 0) {
                    foreach ($this->tags_to_be_removed as $index => $tag_to_be_removed) {
                        Tag::destroy($tag_to_be_removed);
                    }
                }

                foreach($this->tags as $index => $tag) {
                    // Set variables
                    $tag_id = isset($this->tag_id[$index]) ? $this->tag_id[$index] : null;
                    $tag_enabled = isset($this->tag_enabled[$index]) ? ($this->tag_enabled[$index] == false ? 0 : 1) : 0;

                    Tag::updateOrCreate(
                        ['id' => $tag_id],
                        [
                            'name' => $this->tag_name[$index],
                            'enabled' => $tag_enabled,
                            'category_id' => $this->modelId,
                            // 'order' => $this->order,
                        ]
                    );
                }
            });
        } catch(\Exception $e) {
            return $this->dispatch('swal:modal', [
                'type' => 'error',
                'title' => 'Er is iets fout gegaan',
                'text' => $e->getMessage(),
            ]);
        }

        $this->dispatch('closeModalIndex')->to('management.category.index');
        $this->dispatch('refreshParent')->to('management.category.index');
        $this->cleanVars();

        $this->dispatch('swal:modal', [
            'type' => 'success',
            'title' => 'Het item is succesvol aangemaakt/aangepast!',
            'text' => '',
        ]);
    }

    private function cleanVars()
    {
        $this->modelId = null;
        $this->updated_at = null;
        $this->created_at = null;
        $this->name = null;
        $this->enabled = null;
        $this->type = null;
        $this->icon = null;
        $this->order = null;
        $this->edit = 1;

        $this->tags = [];
        $this->tag_id = null;
        $this->tag_name = null;
        $this->tag_enabled = null;
        $this->tag_created_at = null;
        $this->tag_updated_at = null;
        $this->tags_to_be_removed = [];
    }

    #[On('forcedCloseModal')] 
    public function forcedCloseModal()
    {
        $this->cleanVars();
        $this->resetErrorBag();
        $this->resetValidation();
    }

    public function render()
    {
        return view('backend.content.management.category.livewire.form');
    }
}

Code on form page:

<div><form wire:submit="store" class="my-1">
    @if ($edit === 0)
        <div class="mb-1">
            <label for="id" class="col-form-label">ID</label>
            <input wire:model.lazy="modelId" type="integer" class="form-control form-control-md" tabindex="0" disabled>
        </div>
    @endif
    
    <div class="row">
        <div class="col-12 col-sm-6">
            <label for="name" class="col-form-label">Naam</label>
            <input wire:model="name" type="text" class="form-control form-control-md @error('name') is-invalid @enderror" id="name" required tabindex="0" @if ($edit === 0) disabled @endif>
            @error('name')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="col-12 col-sm-6">
            <label for="icon" class="col-form-label">
                Icoon
                <a href="https://fontawesome.com/search?o=r&m=free&s=solid" target="_blank">
                    <i class="fa fa-circle-info"></i>
                </a>
            </label>
            <div class="input-group">
                <span class="input-group-text" id="icon"><i class="fa {{ $icon != null ? $icon : 'fa-home' }}"></i></span>
                <input wire:model="icon" type="text" class="form-control form-control-md @error('icon') is-invalid @enderror" id="icon" required tabindex="0" @if ($edit === 0) disabled @endif placeholder="fa-home">
            </div>
            @error('icon')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="col-12 col-sm-6">
            <label class="col-form-label">Type</label>
            <div class="form-check">
                <input class="form-check-input @error('type') is-invalid @enderror" wire:model="type" type="radio" name="type" id="type.radio" value="radio" @if ($edit === 0) disabled @endif>
                <label class="form-check-label" for="type.radio">Radio</label>
            </div>
            <div class="form-check">
                <input class="form-check-input @error('type') is-invalid @enderror" wire:model="type" type="radio" name="type" id="type.checkbox" value="checkbox" @if ($edit === 0) disabled @endif>
                <label class="form-check-label" for="type.checkbox">Checkbox</label>
            </div>
            @error('type')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="col-12 col-sm-6">
            <label class="col-form-label" for="enabled">Ingeschakeld</label>
            <div class="form-check form-switch">
                <input class="form-check-input @error('enabled') is-invalid @enderror" wire:model="enabled" type="checkbox" name="enabled" id="enabled" @if ($edit === 0) disabled @endif>
            </div>
            @error('enabled')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
    </div>

    <div class="mt-2">
        <h5 class="@error('tags') is-invalid @enderror">Tags</h5>
    </div>

    <div class="mb-1">
        @forelse ($tags as $index => $tag)
            <div class="row justify-content-center align-items-center">
                <div class="col-12 col-sm-{{ $edit == 1 ? '6' : '8' }}">
                    <label for="tag_name.{{ $index }}" class="col-form-label">Naam</label>
                    <input wire:model="tag_name.{{ $index }}" type="text" class="form-control form-control-md @error('tag_name.' . $index) is-invalid @enderror" id="tag_name.{{ $index }}" required tabindex="0" @if ($edit === 0) disabled @endif>
                    @error('tag_name.' . $index)
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-{{ $edit == 1 ? '8' : '12' }} col-sm-4">
                    <label class="col-form-label" for="tag_enabled.{{ $index }}">Ingeschakeld</label>
                    <div class="form-check form-switch">
                        <input class="form-check-input @error('tag_enabled.' . $index) is-invalid @enderror" wire:model="tag_enabled.{{ $index }}" type="checkbox" id="tag_enabled.{{ $index }}" @if ($edit === 0) disabled @endif>
                    </div>
                    @error('tag_enabled.' . $index)
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                @if ($edit == 1)
                    <div class="col-4 col-sm-2">
                        <div wire:click="removeTag({{ $index }})" class="btn btn-danger" tabindex="0">
                            <span wire:target="removeTag.{{ $index }}" wire:loading.class="spinner-border spinner-border-sm" role="status" aria-hidden="true"><i class="fa fa-trash"></i></span>
                        </div>
                    </div>
                @endif
            </div>
        @empty
            <p>Er zijn geen tags gevonden</p>
        @endforelse
        @if ($edit === 1)
            <div wire:click="addTag"class="btn btn-primary mt-3" tabindex="0">
                <span wire:target="addTag" wire:loading.class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                + Nieuw
            </div>
        @endif
    </div>

    @if ($edit === 0)
        <div class="mb-1">
            <label for="updated_at" class="col-form-label col-form-label-md">Aangepast op</label>
            <input wire:model="updated_at" type="text" class="form-control form-control-md" tabindex="0" disabled>
        </div>
    @endif

    @if ($edit === 0)
        <div class="mb-1">
            <label for="created_at" class="col-form-label col-form-label-md">Gemaakt op</label>
            <input wire:model="created_at" type="text" class="form-control form-control-md" tabindex="0" disabled>
        </div>
    @endif

    @if ($edit === 1)
        <button class="btn btn-primary mt-3" wire:target="store" wire.loading.delay wire:loading.class="btn-outline-primary waves-effect" wire:loading.class.remove="btn-primary" wire:loading.attr="disabled" type="submit" tabindex="0">
            <span wire:target="store" wire:loading.class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Opslaan
        </button>
    @endif
</form>
</div>

Code used on page shown by default controller:

@php
    $configData = Helper::appClasses();
@endphp

@extends('backend.layouts.layoutMaster')

@section('title', 'Categorieën')

@section('content')
<!-- modalForm -->
<div wire:ignore.self class="modal fade" data-bs-backdrop="static" id="modalForm" tabindex="-1" role="dialog" aria-labelledby="modalForm" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalForm">Categorie</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                @livewire('management.category.form')
            </div>
        </div>
    </div>
</div>

@livewire('management.category.index')

@endsection

@section('vendor-script')
    <script src="https://unpkg.com/@nextapps-be/livewire-sortablejs@0.4.0/dist/livewire-sortable.js"></script>
@endsection

@section('page-script')
{{-- Bootstrap edit modal --}}
<script>
    window.addEventListener('closeModal', event => {
        $("#modalForm").modal('hide');
    })
    window.addEventListener('openModal', event => {
        $("#modalForm").modal('show');
    })
    $(document).ready(function(){
        // This event is triggered when the modal is hidden
        $("#modalForm").on('hidden.bs.modal', function(){
            Livewire.dispatch('forcedCloseModal');
        });
    });
</script>
@endsection

@livewire('management.category.index') shows the table in the index and calls wire:click to the index livewire controller which starts the showItem($itemID, $edit) function, with the required parameters.

Additional information

No response

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be removed if I haven't met the criteria above.