Datetime picker with reactive property run into an infinite loop when update by another input

[sohailahmad07]

Package

filament/forms

Package Version

3.2.131

Laravel Version

11.36.1

Livewire Version

3.5.12

PHP Version

8.3

Problem description

Hi i have a reactive DateTime input but it when i try to update the input time from another input then it goes into an infinite loop as you can see in the video

Screencast.from.2024-12-24.20-57-51.webm

Expected behavior

it should only update the date and time input once and should not be a infinite loop

Steps to reproduce

1. Install and fresh laravel project with filament form
2. generate a livewire filament form php artisan make:livewire-form Products/CreateProduct --generate
3. Add 2 inputs , Textinput and DateTimeinput Both need to be reactive
4. Set the time when the Textinput is update i will go into an infinite loop

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

https://github.com/sohailahmad07/filament-DateTime-infinit-loop

Relevant log output

No response

[edmer664]

@sohailahmad07 This resolves the infinite loop by returning a formatted string instead of a date object:

// ...existing code...
Forms\Components\TextInput::make('period_of_time')
    ->debounce()
    ->prefixIcon('heroicon-o-clock')
    ->suffix('Hrs')
    ->afterStateUpdated(function (string $state, Forms\Set $set) {
        $newDate = now()->addHours((int)$state);
        $set('date',$newDate->format('Y-m-d H:i:s'));
    })
    ->required(),
// ...existing code...
Forms\Components\DateTimePicker::make('date')
    ->lazy()
    ->native(false),

Recording.2024-12-26.082554.mp4

[sohailahmad07]

@edmer664 thnx that solved it