Many errors occurs with DatePicker in spa() mode

agencetwogether commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

@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.

sergioraldana commented 3 weeks ago

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

filamentphp / filament