wire-elements / modal

Livewire component that provides you with a modal that supports multiple child modals while maintaining state.
MIT License
1.09k stars 129 forks source link

'diplay: none;' of the components don't change #425

Closed atsumi-amaya closed 4 months ago

atsumi-amaya commented 4 months ago

Well, 2 days ago mi aplication work without problems, but when I open a modal again the modal dont show, I dont remember change the configuration. I tried do a exercise in local but I recieve the same problem. Any idea?

Some part from modal.blade.php: `

<div x-show="show" x-on:click="closeModalOnClickAway()" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 transition-all transform"

        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

        <div
                x-show="show && showActiveComponent"
                x-transition:enter="ease-out duration-300"
                x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                x-transition:leave="ease-in duration-200"
                x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                x-bind:class="modalWidth"
                class="inline-block w-full align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:w-full"
                id="modal-container"
                x-trap.noscroll.inert="show && showActiveComponent"
                aria-modal="true"
        >
            @forelse($components as $id => $component)
                <div x-show.immediate="activeComponent == '{{ $id }}'" x-ref="{{ $id }}" wire:key="{{ $id }}">
                    @livewire($component['name'], $component['attributes'], key($id))
                </div>
            @empty
            @endforelse
        </div>
    </div>`

But I open a modal appears this:

image

bielcode commented 4 months ago

Good afternoon friend, after the last update of Alpine.JS this happened, try replacing the alpine import for the previous version in your layout as a workaround:

From that: <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> For that: <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.5/dist/cdn.min.js"></script>

atsumi-amaya commented 4 months ago

thanks @bielcode for the solution, i hope this issues can be patched