Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reactive fields not always saving data when higher debounce value used #15356

Open
appymedia opened this issue Jan 16, 2025 · 0 comments
Open
Labels

Comments

@appymedia
Copy link

Package

filament/filament

Package Version

v3.2.86

Laravel Version

v11.10.0

Livewire Version

v3.5.0

PHP Version

PHP 8.3.11

Problem description

Hi,

I've got a Filament resource, and in the create page I have a form with some reactive text fields that perform calculations, and update values on the form. For a little while I was getting odd behaviour like characters being removed, and other 'glitches' as I typed, esp. typing quickly, or deleting characters quickly. I managed to get this under control by using a debounce value of circa 1000ms. This makes sense to me, given the possible clashing of state updates coming from the server if the debounce is too low.

However I've now noticed if I change a reactive text field with the debounce set to 1000ms, and then hit the 'create' or 'save changes' buttons very quickly - as in during that debounce period, I end up not saving the latest data / state. It's fine if I wait over the 1000ms and save but obviously a user will expect to just hit save and all be well.

Is there a way to either force the state on the server to get the latest user entered data and perform any recalculations (things in afterStateUpdated for e.g.) before saving to DB? Or even temp disable the 'create' / 'save changes' buttons on forms until the latest server state is calculated and in the form thus ensuring I always capture the most up-to-date state?

Many thanks!

Lots of love for Filament by the way ❤️

Expected behavior

Always re-calculate the latest state the user can see or disable saving until the state is recalculated.

Steps to reproduce

Here's a little resource form example showing the issue (from the example repo here). The debounce is increased to 10 seconds to more easily show the problem. If you change the text in field 'test' and press save in a FilamentPHP resource before 10 seconds elapse, you will notice no values are saved. If you try again and wait 10 seconds this time, both 'test' and 'test2' fields are saved as expected with 'test2' being a simple copy of 'test' produced from the code in afterStateUpdated.

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\TextInput::make('test')
                    ->afterStateUpdated(fn(Set $set, $state) => $set('test2',$state))
                    ->live(debounce: 10000),
                Forms\Components\TextInput::make('test2'),
            ]);
    }

Reproduction repository (issue will be closed if this is not valid)

https://github.com/appymedia/filament-issue

Relevant log output

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: Todo
Development

No branches or pull requests

1 participant