Merge pull request #12832 from borjajimnz/feature/modal_option_disabl…

…e_escape_hitting

Feature: Added the option to modals to prevent closing on escape key press

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:

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()"

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 @@ public function closeModalByClickingAway(bool | Closure | null $condition = true
         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 @@ public function isModalClosedByClickingAway(): bool
         return (bool) ($this->evaluate($this->isModalClosedByClickingAway) ?? Modal::$isClosedByClickingAway);
     }
 
+    public function isModalClosedByEscaping(): bool
+    {
+        return (bool) ($this->evaluate($this->isModalClosedByEscaping) ?? Modal::$isClosedByEscaping);
+    }
+
     /**
      * @deprecated Use `makeModalSubmitAction()` instead.
      *

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'),
-                ]
+                    ]
         ),
     ]);
 

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"

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 @@ public static function closedByClickingAway(bool $condition = true): void
     {
         static::$isClosedByClickingAway = $condition;
     }
+
+    public static function closedByEscaping(bool $condition = true): void
+    {
+        static::$isClosedByEscaping = $condition;
+    }
 }