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

Donate 💰 to fund this issue

• You can donate funding to this issue. We receive the money once the issue is completed & confirmed by you.
• 100% of the funding will be distributed between the Filament core team to run all aspects of the project.
• Thank you in advance for helping us make maintenance sustainable!

[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 #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:

Screencast.2024-04-15.13.41.32.mp4

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

[sergioraldana]

The color picker doesn’t work properly in modal when SPA mode is enabled.

[aleksanm]

DateTimePicker in native(true) and using spa() still has this issue. with lot of erros in js console..