Why the jetstream modal is always setting on true and the close button is not working

Question

I am struggling with Jetstream modal dialog here is my code:

in my component I have the following:

 public $ModalFormVisible=false;
 public function ShowReportModal()
{
    $this->ModalFormVisible=true;
}

in my blade.php I have:

 <div>
 <x-jet-button wire:click="ShowReportModal">{{ __('Reporter')}}</x-jet-button>
<x-jet-dialog-modal wire:model="ModalFormVisible">
<x-slot name="title">
    {{ __('Delete Account') }}
</x-slot>

<x-slot name="content">
    {{ __('Are you sure you want to delete your account?') }}

    <div class="mt-4" >
        <x-jet-input type="password" class="mt-1 block w-3/4" placeholder="{{ __('Password') }}"
                    x-ref="password"
                    wire:model.defer="password"
                    wire:keydown.enter="deleteUser" />

        <x-jet-input-error for="password" class="mt-2" />
    </div>
</x-slot>
<x-slot name="footer">
    <x-jet-secondary-button wire:click="$toggle('ModalFormVisible')" wire:loading.attr="disabled">
        {{ __('Cancel') }}
    </x-jet-secondary-button>


</x-slot>

So the problems are:

1. whenever the page is loaded the modal shows up even if ModalFormVisible is false.
2. The cancel button is not working.
3. whene i click on Report Button it doesn't work as well. Any help would be appreciated thank you.

Answer 1

Make sure your livewire component has only ONE root element and everything is in it.

Answer 2

another issue could be in case you are using jet-stream modal as nested livewire component. In this case it is important to add livewire key:

:wire:key="'custom-modal-'.time()"

Otherwise it can happen that modal window is not opening or not closing explained in details here: https://floyk.com/en/post/livewire-5-ways-to-call-and-update-value-on-click and here: https://floyk.com/en/post/how-to-use-laravel-jetstream-livewire-modal

Answer 3

This happens because your modal is not inside a general div, example:

<div>
    <h1>Test</h1>
</div>
<x-jet-dialog-modal wire:model="switchRiseModal">
    <x-slot name="title">
        upload form
    </x-slot>

    <x-slot name="content">
        Upload your PDF and XML files here
    </x-slot>

    <x-slot name="footer">
        <x-jet-secondary-button wire:click="$set('switchUpMode', false)" wire:loading.attr="disabled">
            {{ __('Close') }}
        </x-jet-secondary-button>

        <x-jet-button class="ml-2" wire:click="uploadInvoice()" wire:loading.attr="disabled">
            {{ __('Load') }}
        </x-jet-button>
    </x-slot>
</x-jet-dialog-modal>

The solution is for the above code to be inside a div like so:

<div>

    <div>
        <h1>Test</h1>
    </div>
    <x-jet-dialog-modal wire:model="switchRiseModal">
        <x-slot name="title">
            upload form
        </x-slot>

        <x-slot name="content">
            Upload your PDF and XML files here
        </x-slot>

        <x-slot name="footer">
            <x-jet-secondary-button wire:click="$set('switchUpMode', false)" wire:loading.attr="disabled">
                {{ __('Close') }}
            </x-jet-secondary-button>

            <x-jet-button class="ml-2" wire:click="uploadInvoice()" wire:loading.attr="disabled">
                {{ __('Load') }}
            </x-jet-button>
        </x-slot>
    </x-jet-dialog-modal>

</div>