Filament•2w ago

Value are blinking and missing in Filament Repeater

Sometimes I fill the value and click 'Add new item' immediately the values are missing in the input.

Solution:

Yes you use a loading view field. I made on in here so: blade: ```html @php...

Jump to solution

26 Replies

Shaung BhoneOP•2w ago

Maxi•2w ago

We're having similar issues, IIRC it's probably because you're inputting faster than livewire can handle.

toeknee•2w ago

Think you need to add in ->lazy()

Maxi•2w ago

I don't think there is a fix for it, we tried everything and it's still happening on occasion. You kind of have to live with it if you're using reactive/live fields.

Shaung BhoneOP•2w ago

That's working for me https://github.com/filamentphp/filament/issues/7571

toeknee•2w ago

So you want to use onblur really

toeknee•2w ago

https://filamentphp.com/docs/3.x/forms/advanced#reactive-fields-on-blur

Advanced forms - Form Builder - Filament

toeknee•2w ago

This because it processes after the change and then you are not getting a refresh mid type

Maxi•2w ago

Yes. Debounce does not solve it, it's just giving you more time until it happens.

toeknee•2w ago

Exactly as it's about form refresh, but onBlur sends it on actual click off that field You coul also do afterStateValidated on the repeater and set the total and not have live inputs.

Maxi•2w ago

But sadly even with live(onBlur) if you switch between fields really fast it can still happen.

Shaung BhoneOP•2w ago

delete live() here is my code. but I can't format the total_amout

->schema([
                        Forms\Components\Repeater::make('items')
                            ->relationship()
// others code
                                Forms\Components\TextInput::make('unit_price')
                                    ->label('Unit Price')
                                    ->mask(RawJs::make('$money($input)'))
                                    ->stripCharacters(',')
                                    ->numeric()
                                    ->inputMode('decimal')
                                    ->required()
                            ])
                            ->afterStateUpdated(
                                fn(Forms\Set $set, Forms\Get $get) =>
                                $set(
                                    'total_amount',
                                    round(collect($get('items'))
                                        ->sum(
                                            fn($item) => (float) str_replace(
                                                ',',
                                                '',
                                                $item['unit_price'] ?? 0
                                            )
                                        ), 2)
                                )
                            )
                            ->hiddenLabel()
                            ->required()
                            ->columnSpan(2),
                        Forms\Components\Section::make()
                            ->hiddenLabel()
                            ->schema([
                                Forms\Components\TextInput::make('total_amount')
                                    ->label('Total')
                                    ->numeric()
                                    ->inputMode('decimal')
// other code
                            ])
                    ])

->schema([
                        Forms\Components\Repeater::make('items')
                            ->relationship()
// others code
                                Forms\Components\TextInput::make('unit_price')
                                    ->label('Unit Price')
                                    ->mask(RawJs::make('$money($input)'))
                                    ->stripCharacters(',')
                                    ->numeric()
                                    ->inputMode('decimal')
                                    ->required()
                            ])
                            ->afterStateUpdated(
                                fn(Forms\Set $set, Forms\Get $get) =>
                                $set(
                                    'total_amount',
                                    round(collect($get('items'))
                                        ->sum(
                                            fn($item) => (float) str_replace(
                                                ',',
                                                '',
                                                $item['unit_price'] ?? 0
                                            )
                                        ), 2)
                                )
                            )
                            ->hiddenLabel()
                            ->required()
                            ->columnSpan(2),
                        Forms\Components\Section::make()
                            ->hiddenLabel()
                            ->schema([
                                Forms\Components\TextInput::make('total_amount')
                                    ->label('Total')
                                    ->numeric()
                                    ->inputMode('decimal')
// other code
                            ])
                    ])

toeknee•2w ago

Does the total amount get updated?

Shaung BhoneOP•2w ago

yeah I set in here. Total amount is update without format.

                            ->afterStateUpdated(
                                fn(Forms\Set $set, Forms\Get $get) =>
                                $set(
                                    'total_amount',
                                    round(collect($get('items'))
                                        ->sum(
                                            fn($item) => (float) str_replace(
                                                ',',
                                                '',
                                                $item['unit_price'] ?? 0
                                            )
                                        ), 2)
                                )
                            )

                            ->afterStateUpdated(
                                fn(Forms\Set $set, Forms\Get $get) =>
                                $set(
                                    'total_amount',
                                    round(collect($get('items'))
                                        ->sum(
                                            fn($item) => (float) str_replace(
                                                ',',
                                                '',
                                                $item['unit_price'] ?? 0
                                            )
                                        ), 2)
                                )
                            )

Shaung BhoneOP•2w ago

Maxi•7d ago

Yes, but using the afterStateUpdated() function is really only a viable option if your form isn‘t that big. I‘m currently working on a form that is around +2k lines now and I need almost every value directly in my form too so adding ~50 afterStateUpdated() functions is currently not really an option. I guess I could implement it after the whole Resource is finished but atm it‘s not really an option.

awcodes•7d ago

Sorry, but it sounds like you are trying to force the wrong tech stack in to what you actually need for your use case.

Maxi•7d ago

I know, but I don‘t really have a choice atm. It‘s work related so I‘m forced to do it like this.

awcodes•7d ago

Fair but there’s limitations to the stack. There’s not always an answer to that.

Maxi•7d ago

Yeah I know, but right now it‘s working „fine“ so I guess we won‘t stray away from it. But I‘ll maybe look into MingleJS and see if I can get better reactivity using it with React/Vue. While I‘m at it, is there like a guide or a good example project where a whole Filament page is made in React/Vue but it‘s still integrated into the normal Filament application (having the Filament sidebar, notifications etc.)? Or is that not even really possible? If not, I‘ll maybe report back in 6-12 months on how implementing it using MingleJS worked out for us. 😂

awcodes•7d ago

Sounds good to me.

Maxi•7d ago

I have one more question tough, do you know if it‘s possible to show like a loading modal or something after a field has been filled out and live is triggered? Something like this: https://codepen.io/webhead/pen/WNoedWG

Bima Setiaji Laksana

CodePen

Loading Modal

...

Solution

toeknee•6d ago

Yes you use a loading view field. I made on in here so: blade:

@php
$fixed = $fixed ?? true;
@endphp
<div
    id="wire-loading"
    class="index-100 bottom-0 left-0 right-0 top-0 flex hidden h-full w-full content-center items-center justify-center  {{ !$fixed ? 'absolute' : 'fixed' }}  index-100"
    wire:loading.class.remove="hidden"
>
    <div>
        <svg
            class="h-16 w-16 animate-spin text-gray-700"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
        >
            <circle
                class="opacity-25"
                cx="12"
                cy="12"
                r="10"
                stroke="currentColor"
                stroke-width="4"
            ></circle>
            <path
                class="opacity-75"
                fill="currentColor"
                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
            ></path>
        </svg>
    </div>
</div>

@php
$fixed = $fixed ?? true;
@endphp
<div
    id="wire-loading"
    class="index-100 bottom-0 left-0 right-0 top-0 flex hidden h-full w-full content-center items-center justify-center  {{ !$fixed ? 'absolute' : 'fixed' }}  index-100"
    wire:loading.class.remove="hidden"
>
    <div>
        <svg
            class="h-16 w-16 animate-spin text-gray-700"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
        >
            <circle
                class="opacity-25"
                cx="12"
                cy="12"
                r="10"
                stroke="currentColor"
                stroke-width="4"
            ></circle>
            <path
                class="opacity-75"
                fill="currentColor"
                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
            ></path>
        </svg>
    </div>
</div>

Then in your form:

ViewField::make('loading_icon')
    ->view('forms.loading')
    ->dehydrated(),

ViewField::make('loading_icon')
    ->view('forms.loading')
    ->dehydrated(),

Maxi•6d ago

Oh my god, thanks for the help, really appreciate it! I sent you a tip on PayPal :2frogheart:

toeknee•6d ago

Very welcome! The is fixed can be used like this too:

ViewField::make('loading_icon')
    ->view('forms.loading', ['fixed' => true])
    ->dehydrated(),

ViewField::make('loading_icon')
    ->view('forms.loading', ['fixed' => true])
    ->dehydrated(),

that usually allows a full screen coverage.

Maxi•6d ago

Thank you :D

Gaming

Programming

Value are blinking and missing in Filament Repeater

Did you find this page helpful?