Alpinejs 3.14.4 breaks attribute binding with blade @if() in Livewire 2

[basepack]

After updating Alpine.js from version 3.14.3 to 3.14.4 (or higher), using Blade conditionals like @if($this->order) within a Livewire component's blade file are broken if $this->order is null when the component mounted.

I use Livewire 2.0, but I do not know if that makes a difference. It seems that the newer versions of the AlpineJS dom-diffing are incompatible from versions higher then 3.14.3 and are preventing attributes from being correctly set when using @if conditionals. Removing the @if directive restores the expected behavior.

Steps to Reproduce

• Use Alpine.js 3.14.4 with Livewire 2.0.
• Implement a Blade @if($this->order) conditional within an Alpine.js component that sets attributes based on the condition.
• Emit the show-modal event from the Livewire component.
• See that open attribute is not set when the @if directive is present.

Things tried that did not work:

• Adding wire:key in various places
• Removing the wire:click

Of course, the production code is much more complicated, but the below example is a working example of this bug.

Example code that fails since 3.14.4

<div x-data="{ open: false }"
     x-show="open"
     x-init="
        @this.on('show-modal', () => {
            open = true;
        })
    ">
    
    {{-- a surrounding div already added for dom-diffing --}}
    <div class="p-4">
        <!-- Just remove the below if and it works in AlpineJS > 3.14.3 -->
        <!-- Belof if setup did work in AlpineJS 3.14.3 and lower -->
        @if($this->order) 
            <div wire:click="save" x-bind:class="{ 'active': open }">Save</div>
        @endif
    </div>
</div>

use Livewire\Component;

class OrderComponent extends Component
{
      public ?Order $order = null;

    protected $listeners = [
        'showModal',
    ];

    public function showModal(int $orderId)
    {
        $this->order = Order::find($orderId);

        $this->emitSelf('show-modal');
    }

    public function save()
    {
        //
    }

    public function render()
    {
        return view('livewire.modal-component');
    }
}

So the gist of it is:

• The $this->order property is null when the component initializes
• After an event $this->order is set
• The blade @if($this->order) does not work anymore after upgrading to AlpineJS > 3.14.3

[danie-ramdhani]

I think it fixed in latest version (3.14.7)

[basepack]

I just tested it, but it is not unfortunately.

[dlgombert]

Switching to 3.14.7 fixed it for me. After I had pulled out all of my hair and am now bald. Slightly different issue, but similar enough.

[SimoTod]

@if runs on the server, it seems unlikely that it will affect alpine that runs on the browser. Are you sure it's not something else?

I used this script since your initial example was not fully testable:

<?php

namespace App\Livewire;

use DateTime;
use Livewire\Component;

class Test extends Component
{
    public ?DateTime $date = null;

    public function test(): void
    {
        $this->date = new DateTime();
        $this->dispatch('show-modal');
    }

    public function save()
    {
        //
    }

    public function render()
    {
        return view('livewire.test');
    }
}

// test.blade.php
<div>
    <button type="button" wire:click="test">Test</button>
    <div x-data="{ open: false }"
         x-show="open"
         x-init="
            @this.on('show-modal', () => {
                open = true;
            })
        ">
        <div class="p-4">
            @if($this->date)
                <div wire:click="save" x-bind:class="{ 'active': open }">Save</div>
            @endif
        </div>
    </div>
</div>

after clicking test, I can see Save and the active class is correctly bound.

[Yinci]

It seems that Livewire rendered content is not triggering AlpineJS updates (V3.14.4 through 3.14.7). We have a component that renders a list from Livewire, and all the handlers (such as click, class binding) are simply not bound, so it doesn't do anything. Currently trying to find out how to force Alpine to re-check the component...