Livewire restores alpine's x-cloak attribute

#1

What seems to be the problem: I have a modal that I’m controlling the appearance of with alpine. To prevent a flash of the modal on page load, it has x-cloak. The content of the modal comes from a livewire component. It appears that when Livewire re-renders the modal it puts back the x-cloak that alpine had earlier removed - making the modal disappear again.

livewire component view

<div x-show='open' x-cloak
    class="fixed top-0 z-20 w-full h-full bg-black bg-opacity-75"
    x-transition:enter="transition ease-out duration-200 transform" x-transition:enter-start="opacity-0 scale-95"
    x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-200 transform"
    x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95">
    <div class="flex flex-col flex-start">
        <div class="h-32 text-right empty">
        </div>

        <div class="z-50 w-1/2 p-1 p-16 mx-auto text-gray-800 bg-gray-100 rounded-lg" x-on:click.away="open=false">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
        </div>
    </div>
</div>

x-data is declared in a parent div so that my button to open the modal is in scope.

1 Like
#2

Solution is to move the modal dialog from the livewire component and only have the changing data inside the modal as part of the livewire rendered part.

x-cloak is now part of the page and not part of the component.

Its a pity because I was hoping to have the entire modal as a livewire component.

1 Like