I have a component with a modal, and when it loads, or reloads it is seen for a few moments.
I thought it was fine but it seems that it doesn’t.
Steps to Reproduce:
Reload page or click on link and show the problem
Are you using the latest version of Livewire:
index.blade
<div class="py-6">
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
<h1 class="text-2xl font-semibold text-gray-900">Campañas</h1>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
<!-- Content -->
<div class="flex flex-col">
<div class="my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Id
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Campaña
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Estado
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Fechas
</th>
<th scope="col" class="relative px-6 py-3">
<span class="sr-only">Ver</span>
<span class="sr-only">Editar</span>
<span class="sr-only">Probar</span>
<span class="sr-only">Eliminar</span>
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
@foreach($campaigns as $campaign)
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">
{{ $campaign->id }}
</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">{{ $campaign->campaign }}</div>
<div class="text-sm text-gray-500">{{ $campaign->db }}</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
{{ $campaign->status_label }}
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<div class="text-sm text-gray-400">{{ $campaign->start_in }}</div>
<div class="text-sm text-gray-900">{{ $campaign->end_at }}</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<x-button class="bg-blue-600 hover:bg-blue-900 px-2.5 py-1.5">
Ver
</x-button>
<x-button class="bg-indigo-600 hover:bg-indigo-900 px-2.5 py-1.5">
Editar
</x-button>
<x-button class="bg-purple-600 hover:bg-purple-900 px-2.5 py-1.5">
Probar
</x-button>
<x-button class="bg-red-600 hover:bg-red-900 px-2.5 py-1.5"
wire:click="confirmDelete({{ $campaign->id }})"
>
Borrar
</x-button>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
{{ $campaigns->links() }}
</div>
</div>
<!-- End content -->
</div>
{{-- Modal--}}
<form wire:submit.prevent="delete">
<x-confirmation-modal wire:model.defer="showDeleteCampaignModal">
<x-slot name="title">
Delete {{ $currentCampaign->name }}
</x-slot>
<x-slot name="body">
Continuing will delete campaign permanently.
</x-slot>
<x-slot name="footer">
<x-button class="bg-gray-400 hover:bg-gray-500 px-2.5 py-1.5" wire:click="$set('showDeleteCampaignModal', false)">Cancel</x-button>
<x-button type="submit" class="bg-red-400 hover:bg-red-500 px-2.5 py-1.5">Continue</x-button>
</x-slot>
</x-confirmation-modal>
</form>
</div>
component
<div {{ $attributes }}
x-data="{ show: @entangle('showDeleteCampaignModal') }"
x-show="show"
@keydown.escape.window="show = false"
>
<div
class="fixed z-10 inset-0 overflow-y-auto"
aria-labelledby="modal-title"
role="dialog"
aria-modal="true"
@click="show = false"
>
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
<div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
<main>
<div class="sm:flex sm:items-start">
<div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<!-- Heroicon name: outline/exclamation -->
<svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
{{ $title }}
</h3>
<div class="mt-2">
<p class="text-sm text-gray-500">
{{ $body }}
</p>
</div>
</div>
</div>
</main>
<footer>
<div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
{{ $footer }}
</div>
</footer>
</div>
</div>
</div>
</div>