[Bug]: When using spa mode and turning the page back the calendar is duplicated

[xaimes]

What happened?

When using spa mode and turning the page back the calendar is duplicated.

How to reproduce the bug

1. Add calendar widget to page
2. Use SPA mode in panel provider (wire:navigate)
3. Go to page with calendar widget
4. Go to another page
5. Go back using browser back button
6. Calendar is duplicated
7. Repeat, and we have three calendar widgets.

Package Version

1.2.2

PHP Version

8.3

Laravel Version

11.5.0

Which operating systems does with happen with?

No response

Notes

No response

[lukas-frey]

Thanks for the report. I'm currently not sure how to fix this, so for the time being, you'll have to disable SPA mode to use this package.

Any PR to fix this issue is welcome.

[jhoanborges]

+1

[ovanschie]

I found a workaround for this issue. The idea is to change the Livewire component key on navigate, so the whole component get's re-mounted.

To achieve this, I came up with the following solution:

Add a property to the page component, where the widget is loaded:

public string $calendarKey = 'calendar';

Create a method that listens for navigate change, and change the key:

#[On('livewire:navigated')]
public function resetCalendarKey(): void
{
    $this->calendarKey = 'calendar-' . uniqid();
}

Assign the key to the widget:

public function getWidgets(): array
{
    return [
        $this->calendarKey => CalendarWidget::class,
    ];
}