Filament: Ungespeicherte Änderungen als Modal statt Browser-Dialog

Wenn du in einem Filament-Panel ein Formular bearbeitest und die Seite verlässt, ohne zu speichern, warnt Filament standardmäßig mit unsavedChangesAlerts() – und der Browser zeigt dafür oft den klassischen window.confirm-Dialog. Das funktioniert, wirkt aber neben dem restlichen UI wie von einem anderen Planeten: kein Dark Mode, keine Markenfarben, kein gleicher Ton wie der Rest des Panels.

Dafür habe ich das Paket filament-unsaved-changes-modal gebaut: dieselbe Dirty-State-Logik wie bei Filament, aber die Bestätigung läuft über ein Filament-Modal mit den Buttons „Bleiben“ und „Verlassen“ (Texte per Übersetzung anpassbar).

Was sich für Nutzer ändert

• Navigation im Panel (Links im Body, gleiche Origin): Statt des Browser-Popups erscheint ein Filament-Modal.

• Tab schließen oder Seite neu laden: Dafür gibt es kein Filament-Modal – der Browser behält seinen nativen Hinweis. Das ist technisch so vorgesehen und lässt sich zuverlässig nicht durch ein Panel-Modal ersetzen.

Das Plugin spielt gut mit Filament SPA (livewire:navigate) und mit normaler Vollseiten-Navigation.

Installation

Paket per Composer einbinden (PHP 8.2+, Filament ^5.3.5 – siehe CVE-Hinweis im README):

composer require azgasim/filament-unsaved-changes-modal

Einbindung im Panel

Wichtig: unsavedChangesAlerts() und das Plugin gemeinsam – das Plugin ersetzt nur die Oberfläche der Warnung, nicht die Erkennung ungespeicherter Änderungen.

use AzGasim\FilamentUnsavedChangesModal\FilamentUnsavedChangesModalPlugin;

return $panel
    // … deine bestehende Konfiguration …
    ->unsavedChangesAlerts()
    ->plugin(FilamentUnsavedChangesModalPlugin::make());

Alternativ kannst du FilamentUnsavedChangesModalPlugin::make() in ->plugins([...]) neben deinen anderen Plugins registrieren.

Anpassen ohne Fork

• Breite, Icon, Farben der Buttons und des Icons: Methoden wie modalWidth(), modalIcon(), modalIconColor(), stayButtonColor(), leaveButtonColor() – die erlaubten Werte entsprechen den üblichen Filament-Konventionen (Breite wie Width-Enum, Farben wie die Keys deines Panels).

• Texte (Überschrift, Beschreibung, Button-Labels): nur über Übersetzungen, z. B. nach vendor:publish mit dem Tag filament-unsaved-changes-modal-translations. Im Paket liegen bereits Deutsch und Englisch bei.

• Blade-Markup nur bei Bedarf: Views publishen (filament-unsaved-changes-modal-views) – wenn du die Modal-id änderst, musst du sie mit der Konstante im Plugin und dem Script-Hook abgleichen (steht in der README).

Für einzelne Links kannst du die Abfrage überspringen, indem du data-skip-unsaved-changes-modal auf dem <a> oder einem Elternelement setzt.

Wo du das Paket findest

• GitHub: github.com/AzGasim/filament-unsaved-changes-modal

• Filament: https://filamentphp.com/plugins/aziz-gasim-unsaved-changes-modal

• Packagist: packagist.org/packages/azgasim/filament-unsaved-changes-modal

Feedback und Issues gerne auf GitHub – wenn dir das Modal im Alltag fehlt oder du Ideen für Defaults hast, melde dich dort.