Livewire / Alpine @entangled Property Out of Sync

[maweitzman]

Started noticing an issue with this today... I have a simple button-group component that receives an Alpine @click event as a prop. The click event is firing off just fine, and when I look at stuff in the Alpine dev tools console, the isFunding propery being changed by the button group button clicks is getting updated instantly, but if I click one button and then the other very quickly, it completely disregards the second click. When I look at the network tab, I can see the first click firing off an event instantly, but the second click doesn't register at all. Can anyone please help me, or tell me if I'm doing this wrong or what the correct way is?

File for the Livewire Help parent view:

<div
    id="help-{{ $petition->id }}-content"
    class="flex space-x-2 h-80 content"
    x-data="{
        confirmResponse: false,
        canFund:@entangle('canFund'),
        response: @entangle('response'),
        isFunding: @entangle('isFunding'),
        totalDonation: @entangle('totalDonation'),
        canConfirmResponse: @entangle('canConfirmResponse'),
        changeIsFunding(newValue) { this.isFunding = newValue },
        toggleConfirmResponse() { this.confirmResponse = ! this.confirmResponse }
    }"
>
    <x-core.entities.requests.partials.needs-list.list :petition="$petition" checkable class="w-1/3 h-full"/>

    <x-core.entities.requests.partials.help-forms :petition="$petition" class="w-2/3 h-full"/>

    <x-core.modal x-show="confirmResponse">
        <x-slot name="title">{{ $isFunding ? 'Fund' : 'Provide' }} Items Confirmation</x-slot>

        <div>
            <p class="mb-4">
                By clicking CONFIRM, you are stating that you are willing to {{ $isFunding ? 'fund' : 'provide' }} the items
                listed below. If this does not match what you were intending to fund, click GO BACK to revise your commitment.
            </p>

            @foreach ($petition->sortedByMetNeeds->where('isChecked', true) as $item)
                <span class="mb-1">
                    <x-core.entities.requests.partials.needs-list.item :item="$item" checkable confirm/>
                </span>
            @endforeach

            @if ($isFunding)
                <span>Total amount being funded (including processing fee of $2.50): $52.50</span>
            @endif
        </div>

        <x-slot name="action_cancel">
            <button type="button" class="text" @click="confirmResponse = false">Cancel</button>
        </x-slot>

        <x-slot name="action_confirm">
            <button>Confirm</button>
        </x-slot>
    </x-core.modal>
</div>

File for the Alpine List child view:

@props(['petition', 'checkable' => false])

<div {{ $attributes->merge(['class' => 'flex flex-col']) }}>
    <x-core.entities.requests.partials.needs-list.header :petition="$petition" class="mb-3"/>
    
    <span class="mt-2 label">Check the need(s) you would like to meet:</span>

    {{-- <template x-if="canFund"> --}}
        <span class="flex w-full mt-2">
            @php
                $buttons = [
                    [
                        'text' => 'Provide',
                        'color' => 'brand',
                        'click' => '@click=changeIsFunding(false)',
                        'isActive' => '! isFunding'
                    ],
                    [
                        'text' => 'Fund',
                        'color' => 'fund',
                        'click' => '@click=changeIsFunding(true)',
                        'isActive' => 'isFunding'
                    ]
                ];
            @endphp
    
            <x-core.button-group :buttons="$buttons" trackActive/>
        </span>
    {{-- </template> --}}

    <div class="space-y-4 overflow-y-scroll">
        @foreach ($petition->sortedByMetNeeds as $item)
            @php
                $item->index = $loop->index;
            @endphp

            <x-core.entities.requests.partials.needs-list.item :item="$item" :checkable="$checkable"/>
        @endforeach
    </div>

    <template x-if="isFunding">
        <x-core.entities.requests.partials.needs-list.addition :petitionId="$petition->id"/>
    </template>
</div>

Lastly, file for the Alpine button-group component view:

@props(['buttons', 'trackActive' => false])

<span class="flex justify-center w-full">
    @foreach ($buttons as $button)
        <button
            @class([
                'group w-1/' . count($buttons),
                '-ml-1 rounded-l-none' => ! $loop->first,
                'rounded-r-none' => ! $loop->last,
                'toggle' => $trackActive,
                $button['color'] => isset($button['color'])
            ])
            
            :class="{{ $button['isActive'] }} && 'active'"

            {{ $button['click'] }}
        >
            {{ $button['text'] }}
        </button>
    @endforeach
</span>

Please advise!!

[maweitzman]

@SimoTod any advice here?

[SimoTod]

I don't use Livewire so I don't know much. I think that it's just a race condition but it's just aguess. Your property is entangled so when it changes it causes a serverside update (@entangle is defined in the livewire codebase so I don't know the implementation details). Maybe your second click happens before you get the response back from the server so it gets ignored/discarded. Again, it's just a guess, you should probably ask someone using Livewire

[maweitzman]

Ahhhh -- alright, then I'm sorry for asking you!! I'll ask over in the Livewire repo. Thanks for your input though!