Many errors occurs with DatePicker in spa() mode

[agencetwogether]

Package

filament/filament

Package Version

v3.2.57

Laravel Version

v11.0.7

Livewire Version

v3.4.9

PHP Version

PHP 8.2.16

Problem description

I split my form in multi sections, in first one, Select and Datepicker are ->native(false)and ->live()to permit to see a third component (another Select) when values are set. When I choose an option on first Select, many errors occur in browser console

Alpine Expression Error: displayText is not defined...
Alpine Expression Error: focusedMonth is not defined...
Alpine Expression Error: months is not defined...
Alpine Expression Error: focusedYear is not defined...
Alpine Expression Error: dayLabels is not defined...
Alpine Expression Error: emptyDaysInFocusedMonth is not defined...
Alpine Expression Error: daysInFocusedMonth is not defined...

Same problem when I edit a record, when I change option, same errors appear

• If I remove ->native(false) of all Datepicker, no errors but I need minDate, maxDate etc.
• If I remove ->spa() in AdminPanelProvider, no errors
• If I add, below ->spa()

  ->spaUrlExceptions(fn (): array => [
          url('/admin'),
          PostResource::getUrl(),
      ])

  erros occur too

Expected behavior

No error should appears

Steps to reproduce

You can see this problem by cloning reproduction repository

Reproduction repository

https://github.com/agencetwogether/spa-datepicker

Relevant log output

No response

[ArtMin96]

This is the same problem that has been around for a long time. If you don't have dynamic interactions, such as min/max dates and disabled dates, you can extend and add wire:ignore to make the problem disappear. But this is only temporary and cannot be considered as a solution. You can look at this PR https://github.com/filamentphp/filament/pull/9204

[dmitry-udod]

@agencetwogether Hello! The main reason this problem happens is because, in SPA mode, date pickers are initialized only when they appear on the viewport. Then, when you use live() for any form element and set a value for the 'live' field, Livewire tries to refresh uninitialized variables such as focusedMonth, focusedYear, etc.. https://github.com/filamentphp/filament/blob/3.x/packages/forms/resources/views/components/date-time-picker.blade.php#L154 which initialized in dateTimePickerFormComponent function https://github.com/filamentphp/filament/blob/3.x/packages/forms/resources/views/components/date-time-picker.blade.php#L75

To avoid the bug, you can create a custom view for the date picker and replace following lines: https://github.com/filamentphp/filament/blob/3.x/packages/forms/resources/views/components/date-time-picker.blade.php#L68-L73 with this one https://github.com/filamentphp/filament/blob/3.x/packages/forms/resources/views/components/date-time-picker.blade.php#L72

Here is an example for further clarification:

https://github.com/filamentphp/filament/assets/4639175/170d4d14-0e9a-4d30-8bd9-142a76e966b8

If the proposed solution is acceptable to @danharrin, I can create a PR to fix it.