afterStateUpdatedJS working differently after upgrade to v5

✅ SolvedPanels5️⃣v5

on filament v4, I have the following code which is working fine

Group::make()
    ->extraAttributes([
        'x-data' => <<<'JS'
            {
                calculateTotal() {
                    const first = parseFloat($get('first')) || 0;
                    const second = parseFloat($get('second')) || 0;

                    $set('total_amount', first + second);
                }
            }
        JS,
    ])
    ->schema([
        TextInput::make('first')
            ->required()
            ->afterStateUpdatedJs('calculateTotal()');
        TextInput::make('second')
            ->required()
            ->afterStateUpdatedJs('calculateTotal()');

        TextInput::make('total_amount')
            ->readOnly()
            ->required();
    ]),

Group::make()
    ->extraAttributes([
        'x-data' => <<<'JS'
            {
                calculateTotal() {
                    const first = parseFloat($get('first')) || 0;
                    const second = parseFloat($get('second')) || 0;

                    $set('total_amount', first + second);
                }
            }
        JS,
    ])
    ->schema([
        TextInput::make('first')
            ->required()
            ->afterStateUpdatedJs('calculateTotal()');
        TextInput::make('second')
            ->required()
            ->afterStateUpdatedJs('calculateTotal()');

        TextInput::make('total_amount')
            ->readOnly()
            ->required();
    ]),

After upgraded to filament v5 (with livewire v4) this calculation doesn't do anything at all. This maybe cause by livewire changes, but I am not sure which one cause it.

Any help is appreciated, and thanks in advance

Solution

This maybe a breaking changes (or bugs) between major version, I can confirm this is working on v4 and not working on v5 on new project. I will submit an issue with reproduction repo

For now I found a work around using alpine $watch..

Jump to solution

afterStateUpdatedJS working differently after upgrade to v5

✅ SolvedPanels5️⃣v5

on filament v4, I have the following code which is working fine

Group::make()
    ->extraAttributes([
        'x-data' => <<<'JS'
            {
                calculateTotal() {
                    const first = parseFloat($get('first')) || 0;
                    const second = parseFloat($get('second')) || 0;

                    $set('total_amount', first + second);
                }
            }
        JS,
    ])
    ->schema([
        TextInput::make('first')
            ->required()
            ->afterStateUpdatedJs('calculateTotal()');
        TextInput::make('second')
            ->required()
            ->afterStateUpdatedJs('calculateTotal()');

        TextInput::make('total_amount')
            ->readOnly()
            ->required();
    ]),

Group::make()
    ->extraAttributes([
        'x-data' => <<<'JS'
            {
                calculateTotal() {
                    const first = parseFloat($get('first')) || 0;
                    const second = parseFloat($get('second')) || 0;

                    $set('total_amount', first + second);
                }
            }
        JS,
    ])
    ->schema([
        TextInput::make('first')
            ->required()
            ->afterStateUpdatedJs('calculateTotal()');
        TextInput::make('second')
            ->required()
            ->afterStateUpdatedJs('calculateTotal()');

        TextInput::make('total_amount')
            ->readOnly()
            ->required();
    ]),

Solution

Jump to solution

afterStateUpdatedJS working differently after upgrade to v5

afterStateUpdatedJS working differently after upgrade to v5

Similar Threads

Similar Threads

Similar Threads