diff --git a/packages/actions/docs/04-modals.md b/packages/actions/docs/04-modals.md index 060de6680d..7454d62552 100644 --- a/packages/actions/docs/04-modals.md +++ b/packages/actions/docs/04-modals.md @@ -552,9 +552,9 @@ use Filament\Support\View\Components\Modal; Modal::closeButton(false); ``` -## Disable autofocus on modal open +## Preventing the modal from autofocusing -By default, modals will autofocus on the first focusable element when opened. If you wish to disable this behavior for the modal you can use the `modalAutofocus(false)` method: +By default, modals will autofocus on the first focusable element when opened. If you wish to disable this behavior, you can use the `modalAutofocus(false)` method: ```php Action::make('updateAuthor') diff --git a/packages/actions/resources/views/components/modals.blade.php b/packages/actions/resources/views/components/modals.blade.php index bc387ce7d4..89681b83e5 100644 --- a/packages/actions/resources/views/components/modals.blade.php +++ b/packages/actions/resources/views/components/modals.blade.php @@ -6,7 +6,7 @@ autofocusOnOpen = $condition; + $this->isModalAutofocused = $condition; return $this; } @@ -623,9 +623,9 @@ trait CanOpenModal return (bool) ($this->evaluate($this->isModalClosedByEscaping) ?? Modal::$isClosedByEscaping); } - public function autofocusOnOpen(): bool + public function isModalAutofocused(): bool { - return $this->evaluate($this->autofocusOnOpen) ?? Modal::$autofocusOnOpen; + return $this->evaluate($this->isModalAutofocused) ?? Modal::$isAutofocused; } /** diff --git a/packages/support/docs/09-blade-components/02-modal.md b/packages/support/docs/09-blade-components/02-modal.md index 6a3c2a507f..ae81ca59f1 100644 --- a/packages/support/docs/09-blade-components/02-modal.md +++ b/packages/support/docs/09-blade-components/02-modal.md @@ -195,6 +195,16 @@ By default, when you click away from a modal, it will close itself. If you wish ``` +## 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 `close-by-escaping` attribute: + +```blade + + {{-- Modal content --}} + +``` + ## Hiding the modal close button By default, modals have a close button in the top right corner. You can remove the close button from the modal by using the `close-button` attribute: @@ -205,9 +215,9 @@ By default, modals have a close button in the top right corner. You can remove t ``` -## Disable autofocus on modal open +## Preventing the modal from autofocusing -By default, modals will autofocus on the first focusable element when opened. If you wish to disable this behavior for the modal you can use the `autofocus` attribute: +By default, modals will autofocus on the first focusable element when opened. If you wish to disable this behavior, you can use the `autofocus` attribute: ```blade diff --git a/packages/support/resources/views/components/modal/index.blade.php b/packages/support/resources/views/components/modal/index.blade.php index 42661b3e13..891a6e2ac6 100644 --- a/packages/support/resources/views/components/modal/index.blade.php +++ b/packages/support/resources/views/components/modal/index.blade.php @@ -6,7 +6,7 @@ @props([ 'alignment' => Alignment::Start, 'ariaLabelledby' => null, - 'autofocus' => \Filament\Support\View\Components\Modal::$autofocusOnOpen, + 'autofocus' => \Filament\Support\View\Components\Modal::$isAutofocused, 'closeButton' => \Filament\Support\View\Components\Modal::$hasCloseButton, 'closeByClickingAway' => \Filament\Support\View\Components\Modal::$isClosedByClickingAway, 'closeByEscaping' => \Filament\Support\View\Components\Modal::$isClosedByEscaping, @@ -96,11 +96,7 @@ x-on:{{ $closeEventName }}.window="if ($event.detail.id === '{{ $id }}') close()" x-on:{{ $openEventName }}.window="if ($event.detail.id === '{{ $id }}') open()" @endif - @if ($autofocus) - x-trap.noscroll="isOpen" - @else - x-trap.noscroll.noautofocus="isOpen" - @endif + x-trap.noscroll{{ $autofocus ? '' : '.noautofocus' }}="isOpen" x-bind:class="{ 'fi-modal-open': isOpen, }" diff --git a/packages/support/src/View/Components/Modal.php b/packages/support/src/View/Components/Modal.php index 492f00299c..ac4aa633de 100644 --- a/packages/support/src/View/Components/Modal.php +++ b/packages/support/src/View/Components/Modal.php @@ -10,7 +10,12 @@ class Modal public static bool $isClosedByEscaping = true; - public static bool $autofocusOnOpen = true; + public static bool $isAutofocused = true; + + public static function autofocus(bool $condition = true): void + { + static::$isAutofocused = $condition; + } public static function closeButton(bool $condition = true): void { @@ -26,9 +31,4 @@ class Modal { static::$isClosedByEscaping = $condition; } - - public static function autofocuces(bool $condition = true): void - { - static::$autofocusOnOpen = $condition; - } } diff --git a/packages/tables/resources/views/components/filters/dialog.blade.php b/packages/tables/resources/views/components/filters/dialog.blade.php index b42a1d0f3e..deff85ce48 100644 --- a/packages/tables/resources/views/components/filters/dialog.blade.php +++ b/packages/tables/resources/views/components/filters/dialog.blade.php @@ -15,9 +15,10 @@ @if (($layout === FiltersLayout::Modal) || $triggerAction->isModalSlideOver())