From 866d66b7b920ae696b948587ef5810410bc47fec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Borja=20Jim=C3=A9nez?= Date: Fri, 17 May 2024 00:27:23 +0200 Subject: [PATCH 1/3] add option to prevent modal closing by hitting escape --- packages/actions/docs/04-modals.md | 23 +++++++++++++++++++ .../views/components/modals.blade.php | 5 ++++ .../actions/src/Concerns/CanOpenModal.php | 13 +++++++++++ .../views/components/modal/index.blade.php | 10 ++++++-- .../support/src/View/Components/Modal.php | 6 +++++ 5 files changed, 55 insertions(+), 2 deletions(-) diff --git a/packages/actions/docs/04-modals.md b/packages/actions/docs/04-modals.md index 312bf08326..c8a1187381 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 hitting escape + +By default, when you hit escape on a modal, it will close itself. If you wish to disable this behavior for a specific action, you can use the `closedByHittingEscape(false)` method: + +```php +Action::make('updateAuthor') + ->form([ + // ... + ]) + ->action(function (array $data): void { + // ... + }) + ->closedByHittingEscape(false) +``` + +If you'd like to change the behaviour for all modals in the application, you can do so by calling `Modal::closedByHittingEscape()` inside a service provider or middleware: + +```php +use Filament\Support\View\Components\Modal; + +Modal::closedByHittingEscape(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..eb38292739 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-hitting-escape="$action?->isModalClosedByHittingEscape()" :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-hitting-escape="$action?->isModalClosedByHittingEscape()" :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-hitting-escape="$action?->isModalClosedByHittingEscape()" :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-hitting-escape="$action?->isModalClosedByHittingEscape()" :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-hitting-escape="$action?->isModalClosedByHittingEscape()" :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..264fbcb497 100644 --- a/packages/actions/src/Concerns/CanOpenModal.php +++ b/packages/actions/src/Concerns/CanOpenModal.php @@ -79,6 +79,7 @@ trait CanOpenModal protected bool | Closure | null $hasModalCloseButton = null; protected bool | Closure | null $isModalClosedByClickingAway = null; + protected bool | Closure | null $isModalClosedByHittingEscape = null; protected string | Closure | null $modalIcon = null; @@ -94,6 +95,13 @@ trait CanOpenModal return $this; } + public function closeModalByHittingEscape(bool | Closure | null $condition = true): static + { + $this->isModalClosedByHittingEscape = $condition; + + return $this; + } + /** * @deprecated Use `modalAlignment(Alignment::Center)` instead. */ @@ -600,6 +608,11 @@ trait CanOpenModal return (bool) ($this->evaluate($this->isModalClosedByClickingAway) ?? Modal::$isClosedByClickingAway); } + public function isModalClosedByHittingEscape(): bool + { + return (bool) ($this->evaluate($this->isModalClosedByHittingEscape) ?? Modal::$isClosedByHittingEscape); + } + /** * @deprecated Use `makeModalSubmitAction()` instead. * diff --git a/packages/support/resources/views/components/modal/index.blade.php b/packages/support/resources/views/components/modal/index.blade.php index 6a3cc6a1e2..14682c1389 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, + 'closeByHittingEscape' => \Filament\Support\View\Components\Modal::$isClosedByHittingEscape, 'closeEventName' => 'close-modal', 'description' => null, 'displayClasses' => 'inline-block', @@ -23,6 +24,7 @@ 'id' => null, 'openEventName' => 'open-modal', 'slideOver' => false, + 'closeToAction' => true, 'stickyFooter' => false, 'stickyHeader' => false, 'trigger' => null, @@ -155,7 +157,10 @@ $watch('isOpen', () => (isShown = isOpen)) }) " - x-on:keydown.window.escape="{{ $closeEventHandler }}" + @if ($closeByHittingEscape) + x-on:keydown.window.escape="{{ $closeEventHandler }}" + @endif + x-show="isShown" x-transition:enter="duration-300" x-transition:leave="duration-300" @@ -175,9 +180,10 @@ ($extraModalWindowAttributeBag ?? new \Illuminate\View\ComponentAttributeBag())->class([ 'fi-modal-window pointer-events-auto relative row-start-2 flex w-full cursor-default flex-col bg-white shadow-xl ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10', 'fi-modal-slide-over-window ms-auto overflow-y-auto' => $slideOver, + 'p-10 border border-red-300 shadow shadow-4xl' => $closeToAction, // Using an arbitrary value instead of the h-dvh class that was added in Tailwind CSS v3.4.0 // to ensure compatibility with custom themes that may use an older version of Tailwind CSS. - 'h-[100dvh]' => $slideOver || ($width === MaxWidth::Screen), + 'h-[100dvh]' => ($slideOver || ($width === MaxWidth::Screen)) && !$closeToAction, 'mx-auto rounded-xl' => ! ($slideOver || ($width === MaxWidth::Screen)), 'hidden' => ! $visible, match ($width) { diff --git a/packages/support/src/View/Components/Modal.php b/packages/support/src/View/Components/Modal.php index 9b90598807..3127febf18 100644 --- a/packages/support/src/View/Components/Modal.php +++ b/packages/support/src/View/Components/Modal.php @@ -7,6 +7,7 @@ class Modal public static bool $hasCloseButton = true; public static bool $isClosedByClickingAway = true; + public static bool $isClosedByHittingEscape = true; public static function closeButton(bool $condition = true): void { @@ -17,4 +18,9 @@ class Modal { static::$isClosedByClickingAway = $condition; } + + public static function closedByHittingEscape(bool $condition = true): void + { + static::$isClosedByHittingEscape = $condition; + } } From e91f66d501fb01d2ccd1448e0f9b17b1bbfeb00a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Borja=20Jim=C3=A9nez?= Date: Fri, 17 May 2024 00:48:17 +0200 Subject: [PATCH 2/3] prettier --- packages/actions/src/Concerns/CanOpenModal.php | 1 + .../resources/views/components/button/index.blade.php | 2 +- .../support/resources/views/components/modal/index.blade.php | 5 +---- packages/support/src/View/Components/Modal.php | 1 + 4 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/actions/src/Concerns/CanOpenModal.php b/packages/actions/src/Concerns/CanOpenModal.php index 264fbcb497..865b98d161 100644 --- a/packages/actions/src/Concerns/CanOpenModal.php +++ b/packages/actions/src/Concerns/CanOpenModal.php @@ -79,6 +79,7 @@ trait CanOpenModal protected bool | Closure | null $hasModalCloseButton = null; protected bool | Closure | null $isModalClosedByClickingAway = null; + protected bool | Closure | null $isModalClosedByHittingEscape = null; protected string | Closure | null $modalIcon = null; 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 14682c1389..1e107f8ee3 100644 --- a/packages/support/resources/views/components/modal/index.blade.php +++ b/packages/support/resources/views/components/modal/index.blade.php @@ -24,7 +24,6 @@ 'id' => null, 'openEventName' => 'open-modal', 'slideOver' => false, - 'closeToAction' => true, 'stickyFooter' => false, 'stickyHeader' => false, 'trigger' => null, @@ -160,7 +159,6 @@ @if ($closeByHittingEscape) x-on:keydown.window.escape="{{ $closeEventHandler }}" @endif - x-show="isShown" x-transition:enter="duration-300" x-transition:leave="duration-300" @@ -180,10 +178,9 @@ ($extraModalWindowAttributeBag ?? new \Illuminate\View\ComponentAttributeBag())->class([ 'fi-modal-window pointer-events-auto relative row-start-2 flex w-full cursor-default flex-col bg-white shadow-xl ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10', 'fi-modal-slide-over-window ms-auto overflow-y-auto' => $slideOver, - 'p-10 border border-red-300 shadow shadow-4xl' => $closeToAction, // Using an arbitrary value instead of the h-dvh class that was added in Tailwind CSS v3.4.0 // to ensure compatibility with custom themes that may use an older version of Tailwind CSS. - 'h-[100dvh]' => ($slideOver || ($width === MaxWidth::Screen)) && !$closeToAction, + 'h-[100dvh]' => $slideOver || ($width === MaxWidth::Screen), 'mx-auto rounded-xl' => ! ($slideOver || ($width === MaxWidth::Screen)), 'hidden' => ! $visible, match ($width) { diff --git a/packages/support/src/View/Components/Modal.php b/packages/support/src/View/Components/Modal.php index 3127febf18..8fd281fe33 100644 --- a/packages/support/src/View/Components/Modal.php +++ b/packages/support/src/View/Components/Modal.php @@ -7,6 +7,7 @@ class Modal public static bool $hasCloseButton = true; public static bool $isClosedByClickingAway = true; + public static bool $isClosedByHittingEscape = true; public static function closeButton(bool $condition = true): void From e99337faa61430a87269263719103e6babff3eea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Borja=20Jim=C3=A9nez?= Date: Fri, 17 May 2024 15:52:28 +0200 Subject: [PATCH 3/3] change to escaping --- packages/actions/docs/04-modals.md | 10 +++++----- .../resources/views/components/modals.blade.php | 10 +++++----- packages/actions/src/Concerns/CanOpenModal.php | 10 +++++----- .../resources/views/components/modal/index.blade.php | 4 ++-- packages/support/src/View/Components/Modal.php | 6 +++--- 5 files changed, 20 insertions(+), 20 deletions(-) diff --git a/packages/actions/docs/04-modals.md b/packages/actions/docs/04-modals.md index c8a1187381..55ea1b3ee9 100644 --- a/packages/actions/docs/04-modals.md +++ b/packages/actions/docs/04-modals.md @@ -506,9 +506,9 @@ use Filament\Support\View\Components\Modal; Modal::closedByClickingAway(false); ``` -## Closing the modal by hitting escape +## Closing the modal by escaping -By default, when you hit escape on a modal, it will close itself. If you wish to disable this behavior for a specific action, you can use the `closedByHittingEscape(false)` method: +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') @@ -518,15 +518,15 @@ Action::make('updateAuthor') ->action(function (array $data): void { // ... }) - ->closedByHittingEscape(false) + ->closedByEscaping(false) ``` -If you'd like to change the behaviour for all modals in the application, you can do so by calling `Modal::closedByHittingEscape()` inside a service provider or middleware: +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::closedByHittingEscape(false); +Modal::closedByEscaping(false); ``` ## Hiding the modal close button diff --git a/packages/actions/resources/views/components/modals.blade.php b/packages/actions/resources/views/components/modals.blade.php index eb38292739..4799958ee0 100644 --- a/packages/actions/resources/views/components/modals.blade.php +++ b/packages/actions/resources/views/components/modals.blade.php @@ -8,7 +8,7 @@ :alignment="$action?->getModalAlignment()" :close-button="$action?->hasModalCloseButton()" :close-by-clicking-away="$action?->isModalClosedByClickingAway()" - :close-by-hitting-escape="$action?->isModalClosedByHittingEscape()" + :close-by-escaping="$action?->isModalClosedByEscaping()" :description="$action?->getModalDescription()" display-classes="block" :extra-modal-window-attribute-bag="$action?->getExtraModalWindowAttributeBag()" @@ -69,7 +69,7 @@ :alignment="$action?->getModalAlignment()" :close-button="$action?->hasModalCloseButton()" :close-by-clicking-away="$action?->isModalClosedByClickingAway()" - :close-by-hitting-escape="$action?->isModalClosedByHittingEscape()" + :close-by-escaping="$action?->isModalClosedByEscaping()" :description="$action?->getModalDescription()" display-classes="block" :extra-modal-window-attribute-bag="$action?->getExtraModalWindowAttributeBag()" @@ -124,7 +124,7 @@ :alignment="$action?->getModalAlignment()" :close-button="$action?->hasModalCloseButton()" :close-by-clicking-away="$action?->isModalClosedByClickingAway()" - :close-by-hitting-escape="$action?->isModalClosedByHittingEscape()" + :close-by-escaping="$action?->isModalClosedByEscaping()" :description="$action?->getModalDescription()" display-classes="block" :extra-modal-window-attribute-bag="$action?->getExtraModalWindowAttributeBag()" @@ -185,7 +185,7 @@ :alignment="$action?->getModalAlignment()" :close-button="$action?->hasModalCloseButton()" :close-by-clicking-away="$action?->isModalClosedByClickingAway()" - :close-by-hitting-escape="$action?->isModalClosedByHittingEscape()" + :close-by-escaping="$action?->isModalClosedByEscaping()" :description="$action?->getModalDescription()" display-classes="block" :extra-modal-window-attribute-bag="$action?->getExtraModalWindowAttributeBag()" @@ -246,7 +246,7 @@ :alignment="$action?->getModalAlignment()" :close-button="$action?->hasModalCloseButton()" :close-by-clicking-away="$action?->isModalClosedByClickingAway()" - :close-by-hitting-escape="$action?->isModalClosedByHittingEscape()" + :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 865b98d161..95a00aac30 100644 --- a/packages/actions/src/Concerns/CanOpenModal.php +++ b/packages/actions/src/Concerns/CanOpenModal.php @@ -80,7 +80,7 @@ trait CanOpenModal protected bool | Closure | null $isModalClosedByClickingAway = null; - protected bool | Closure | null $isModalClosedByHittingEscape = null; + protected bool | Closure | null $isModalClosedByEscaping = null; protected string | Closure | null $modalIcon = null; @@ -96,9 +96,9 @@ trait CanOpenModal return $this; } - public function closeModalByHittingEscape(bool | Closure | null $condition = true): static + public function closeModalByEscaping(bool | Closure | null $condition = true): static { - $this->isModalClosedByHittingEscape = $condition; + $this->isModalClosedByEscaping = $condition; return $this; } @@ -609,9 +609,9 @@ trait CanOpenModal return (bool) ($this->evaluate($this->isModalClosedByClickingAway) ?? Modal::$isClosedByClickingAway); } - public function isModalClosedByHittingEscape(): bool + public function isModalClosedByEscaping(): bool { - return (bool) ($this->evaluate($this->isModalClosedByHittingEscape) ?? Modal::$isClosedByHittingEscape); + return (bool) ($this->evaluate($this->isModalClosedByEscaping) ?? Modal::$isClosedByEscaping); } /** diff --git a/packages/support/resources/views/components/modal/index.blade.php b/packages/support/resources/views/components/modal/index.blade.php index 1e107f8ee3..67b1c5edb6 100644 --- a/packages/support/resources/views/components/modal/index.blade.php +++ b/packages/support/resources/views/components/modal/index.blade.php @@ -8,7 +8,7 @@ 'ariaLabelledby' => null, 'closeButton' => \Filament\Support\View\Components\Modal::$hasCloseButton, 'closeByClickingAway' => \Filament\Support\View\Components\Modal::$isClosedByClickingAway, - 'closeByHittingEscape' => \Filament\Support\View\Components\Modal::$isClosedByHittingEscape, + 'closeByEscaping' => \Filament\Support\View\Components\Modal::$isClosedByEscaping, 'closeEventName' => 'close-modal', 'description' => null, 'displayClasses' => 'inline-block', @@ -156,7 +156,7 @@ $watch('isOpen', () => (isShown = isOpen)) }) " - @if ($closeByHittingEscape) + @if ($closeByEscaping) x-on:keydown.window.escape="{{ $closeEventHandler }}" @endif x-show="isShown" diff --git a/packages/support/src/View/Components/Modal.php b/packages/support/src/View/Components/Modal.php index 8fd281fe33..2c6e80c2a2 100644 --- a/packages/support/src/View/Components/Modal.php +++ b/packages/support/src/View/Components/Modal.php @@ -8,7 +8,7 @@ class Modal public static bool $isClosedByClickingAway = true; - public static bool $isClosedByHittingEscape = true; + public static bool $isClosedByEscaping = true; public static function closeButton(bool $condition = true): void { @@ -20,8 +20,8 @@ class Modal static::$isClosedByClickingAway = $condition; } - public static function closedByHittingEscape(bool $condition = true): void + public static function closedByEscaping(bool $condition = true): void { - static::$isClosedByHittingEscape = $condition; + static::$isClosedByEscaping = $condition; } }