diff --git a/packages/actions/docs/04-modals.md b/packages/actions/docs/04-modals.md index 312bf08326..55ea1b3ee9 100644 --- a/packages/actions/docs/04-modals.md +++ b/packages/actions/docs/04-modals.md @@ -506,6 +506,29 @@ use Filament\Support\View\Components\Modal; Modal::closedByClickingAway(false); ``` +## Closing the modal by escaping + +By default, when you press escape on a modal, it will close itself. If you wish to disable this behavior for a specific action, you can use the `closedByEscaping(false)` method: + +```php +Action::make('updateAuthor') + ->form([ + // ... + ]) + ->action(function (array $data): void { + // ... + }) + ->closedByEscaping(false) +``` + +If you'd like to change the behaviour for all modals in the application, you can do so by calling `Modal::closedByEscaping()` inside a service provider or middleware: + +```php +use Filament\Support\View\Components\Modal; + +Modal::closedByEscaping(false); +``` + ## Hiding the modal close button By default, modals have a close button in the top right corner. If you wish to hide the close button, you can use the `modalCloseButton(false)` method: diff --git a/packages/actions/resources/views/components/modals.blade.php b/packages/actions/resources/views/components/modals.blade.php index d4e91b8217..4799958ee0 100644 --- a/packages/actions/resources/views/components/modals.blade.php +++ b/packages/actions/resources/views/components/modals.blade.php @@ -8,6 +8,7 @@ :alignment="$action?->getModalAlignment()" :close-button="$action?->hasModalCloseButton()" :close-by-clicking-away="$action?->isModalClosedByClickingAway()" + :close-by-escaping="$action?->isModalClosedByEscaping()" :description="$action?->getModalDescription()" display-classes="block" :extra-modal-window-attribute-bag="$action?->getExtraModalWindowAttributeBag()" @@ -68,6 +69,7 @@ :alignment="$action?->getModalAlignment()" :close-button="$action?->hasModalCloseButton()" :close-by-clicking-away="$action?->isModalClosedByClickingAway()" + :close-by-escaping="$action?->isModalClosedByEscaping()" :description="$action?->getModalDescription()" display-classes="block" :extra-modal-window-attribute-bag="$action?->getExtraModalWindowAttributeBag()" @@ -122,6 +124,7 @@ :alignment="$action?->getModalAlignment()" :close-button="$action?->hasModalCloseButton()" :close-by-clicking-away="$action?->isModalClosedByClickingAway()" + :close-by-escaping="$action?->isModalClosedByEscaping()" :description="$action?->getModalDescription()" display-classes="block" :extra-modal-window-attribute-bag="$action?->getExtraModalWindowAttributeBag()" @@ -182,6 +185,7 @@ :alignment="$action?->getModalAlignment()" :close-button="$action?->hasModalCloseButton()" :close-by-clicking-away="$action?->isModalClosedByClickingAway()" + :close-by-escaping="$action?->isModalClosedByEscaping()" :description="$action?->getModalDescription()" display-classes="block" :extra-modal-window-attribute-bag="$action?->getExtraModalWindowAttributeBag()" @@ -242,6 +246,7 @@ :alignment="$action?->getModalAlignment()" :close-button="$action?->hasModalCloseButton()" :close-by-clicking-away="$action?->isModalClosedByClickingAway()" + :close-by-escaping="$action?->isModalClosedByEscaping()" :description="$action?->getModalDescription()" display-classes="block" :extra-modal-window-attribute-bag="$action?->getExtraModalWindowAttributeBag()" diff --git a/packages/actions/src/Concerns/CanOpenModal.php b/packages/actions/src/Concerns/CanOpenModal.php index b36fa69916..95a00aac30 100644 --- a/packages/actions/src/Concerns/CanOpenModal.php +++ b/packages/actions/src/Concerns/CanOpenModal.php @@ -80,6 +80,8 @@ trait CanOpenModal protected bool | Closure | null $isModalClosedByClickingAway = null; + protected bool | Closure | null $isModalClosedByEscaping = null; + protected string | Closure | null $modalIcon = null; /** @@ -94,6 +96,13 @@ trait CanOpenModal return $this; } + public function closeModalByEscaping(bool | Closure | null $condition = true): static + { + $this->isModalClosedByEscaping = $condition; + + return $this; + } + /** * @deprecated Use `modalAlignment(Alignment::Center)` instead. */ @@ -600,6 +609,11 @@ trait CanOpenModal return (bool) ($this->evaluate($this->isModalClosedByClickingAway) ?? Modal::$isClosedByClickingAway); } + public function isModalClosedByEscaping(): bool + { + return (bool) ($this->evaluate($this->isModalClosedByEscaping) ?? Modal::$isClosedByEscaping); + } + /** * @deprecated Use `makeModalSubmitAction()` instead. * diff --git a/packages/support/resources/views/components/button/index.blade.php b/packages/support/resources/views/components/button/index.blade.php index 9388814b55..10d02df055 100644 --- a/packages/support/resources/views/components/button/index.blade.php +++ b/packages/support/resources/views/components/button/index.blade.php @@ -98,7 +98,7 @@ 'ring-1 ring-gray-950/10 dark:ring-white/20' => (($color === 'gray') || ($tag === 'label')) && (! $grouped), 'bg-custom-600 text-white hover:bg-custom-500 focus-visible:ring-custom-500/50 dark:bg-custom-500 dark:hover:bg-custom-400 dark:focus-visible:ring-custom-400/50' => ($color !== 'gray') && ($tag !== 'label'), '[input:checked+&]:bg-custom-600 [input:checked+&]:text-white [input:checked+&]:ring-0 [input:checked+&]:hover:bg-custom-500 dark:[input:checked+&]:bg-custom-500 dark:[input:checked+&]:hover:bg-custom-400 [input:checked:focus-visible+&]:ring-custom-500/50 dark:[input:checked:focus-visible+&]:ring-custom-400/50 [input:focus-visible+&]:z-10 [input:focus-visible+&]:ring-2 [input:focus-visible+&]:ring-gray-950/10 dark:[input:focus-visible+&]:ring-white/20' => ($color !== 'gray') && ($tag === 'label'), - ] + ] ), ]); diff --git a/packages/support/resources/views/components/modal/index.blade.php b/packages/support/resources/views/components/modal/index.blade.php index 6a3cc6a1e2..67b1c5edb6 100644 --- a/packages/support/resources/views/components/modal/index.blade.php +++ b/packages/support/resources/views/components/modal/index.blade.php @@ -8,6 +8,7 @@ 'ariaLabelledby' => null, 'closeButton' => \Filament\Support\View\Components\Modal::$hasCloseButton, 'closeByClickingAway' => \Filament\Support\View\Components\Modal::$isClosedByClickingAway, + 'closeByEscaping' => \Filament\Support\View\Components\Modal::$isClosedByEscaping, 'closeEventName' => 'close-modal', 'description' => null, 'displayClasses' => 'inline-block', @@ -155,7 +156,9 @@ $watch('isOpen', () => (isShown = isOpen)) }) " - x-on:keydown.window.escape="{{ $closeEventHandler }}" + @if ($closeByEscaping) + x-on:keydown.window.escape="{{ $closeEventHandler }}" + @endif x-show="isShown" x-transition:enter="duration-300" x-transition:leave="duration-300" diff --git a/packages/support/src/View/Components/Modal.php b/packages/support/src/View/Components/Modal.php index 9b90598807..2c6e80c2a2 100644 --- a/packages/support/src/View/Components/Modal.php +++ b/packages/support/src/View/Components/Modal.php @@ -8,6 +8,8 @@ class Modal public static bool $isClosedByClickingAway = true; + public static bool $isClosedByEscaping = true; + public static function closeButton(bool $condition = true): void { static::$hasCloseButton = $condition; @@ -17,4 +19,9 @@ class Modal { static::$isClosedByClickingAway = $condition; } + + public static function closedByEscaping(bool $condition = true): void + { + static::$isClosedByEscaping = $condition; + } }