Binding a Livewire model to Alpine fails in 2.8.2?

[ju5t]

A few days ago I upgraded Alpine to the latest version. I was running into a bug where having an Alpine component inside another component had some errors. 2.8.2 fixed that. We were on 2.7.3 before.

I just found this upgrade breaks some functionality of a component we have. This is what happens in this component:

• It has 3 fields: quote.quantity, quote.price, quote.subtotal. They are all input fields in the rendered views.
• In updated() we check if the field is quantity or price and if it is, we update the subtotal.

We have a custom made currency input component that renders the fields, it's based on AutoNumeric.js:

<x-input.currency wire:model="quote.subtotal" readonly />

In 2.8.2, whenever you change the quantity or price, the subtotal is completely removed from the input field, it's not zero, it's empty. The input itself is there, so I don't think this is some sort of dom diffing thing. I tried the Alpine inspector tool and this says the value of the Alpine component is set. I don't understand why it's suddenly not being displayed anymore though.

I am not convinced this is a bug, but I'm not sure if its something in the component either.

I hope someone can either help me in the right direction or confirm it's a bug. Either way, if I need to give more information, let me know. The currency component we is shown below.

Component

This is the component we have made (feel free to share/use as needed).

@props([
    'leadingAddOn' => false,
    'large' => false,
    'symbol' => '€',
])

<div
    x-data="{ value: @entangle($attributes->wire('model')), autonumeric: undefined }"
    x-init="
        autonumeric = new AutoNumeric($refs.currency, value, {
            currencySymbol: '{{ $symbol }} ',
            decimalCharacter: ',',
            decimalCharacterAlternative: '.',
            digitGroupSeparator: '.'
        });
    "
    class="flex rounded-md"
>
    @if ($leadingAddOn)
        <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
            {{ $leadingAddOn }}
        </span>
    @endif

    <input
        x-ref="currency"
        x-on:blur="value = autonumeric.getNumber()"
        x-bind="value"
        type="text"
        {{ $attributes->whereDoesntStartWith('wire:model')->merge(['class' => 'focus:ring-green-500 focus:border-green-500 block w-full border-gray-300 ' . ($large ? ' text-base py-2.5' : ' text-sm') . ($leadingAddOn ? ' rounded-none rounded-r-md' : ' rounded-md')]) }}
    />
</div>

[calebporzio]

Hi there, thanks for reporting this.

Going to close this, but please reopen with copy and pastable, stripped down code for reproduction.

[calebporzio]

Sorry, I realize you can't reopen this here.

[ju5t]

No problem, will try to come back on this tomorrow.

[ju5t]

@calebporzio it took me less time than I expected :)

Component:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class AlpineJS extends Component
{
    public $quote = [
        'quantity' => 0,
        'price' => 0,
        'subtotal' => 0,
    ];

    public function updatedQuoteQuantity()
    {
        $this->recalculate();
    }

    public function updatedQuotePrice()
    {
        $this->recalculate();
    }

    public function recalculate()
    {
        $this->quote['subtotal'] = $this->quote['price'] * $this->quote['quantity'];
    }

    public function render()
    {
        return view('livewire.alpine-j-s');
    }
}

View:

<div class="p-8">
    <script src="https://cdn.jsdelivr.net/npm/autonumeric@4.5.4"></script>

    <div class="flex space-x-4">
        <input wire:model="quote.quantity" type="text" class="focus:ring-green-500 focus:border-green-500 block w-full border border-gray-300" />

        <div
            x-data="{ value: @entangle('quote.price'), autonumeric: undefined }"
            x-init="
                autonumeric = new AutoNumeric($refs.currency, value, {
                    currencySymbol: '$ ',
                    decimalCharacter: ',',
                    decimalCharacterAlternative: '.',
                    digitGroupSeparator: '.'
                });
            "
            class="flex rounded-md"
        >
            <input
                x-ref="currency"
                x-on:blur="value = autonumeric.getNumber()"
                x-bind="value"
                type="text"
                class="focus:ring-green-500 focus:border-green-500 block w-full border-gray-300"
            />
        </div>

        <div
            x-data="{ value: @entangle('quote.subtotal'), autonumeric: undefined }"
            x-init="
                autonumeric = new AutoNumeric($refs.currency, value, {
                    currencySymbol: '$ ',
                    decimalCharacter: ',',
                    decimalCharacterAlternative: '.',
                    digitGroupSeparator: '.'
                });
            "
            class="flex rounded-md"
        >
            <input
                x-ref="currency"
                x-on:blur="value = autonumeric.getNumber()"
                x-bind="value"
                type="text"
                class="focus:ring-green-500 focus:border-green-500 block w-full border-gray-300"
            />
        </div>
    </div>

    <div>Output of $quote: @json($quote)</div>

</div>

Again, not sure if this is a bug, even though it worked in 2.7.3. Let me know if you need anything else.