modal click through allowed#19783
Merged
Merged
Conversation
…entphp#2) * Add modal close button parent cancellation Agent-Logs-Url: https://github.com/CamKemBell/filament/sessions/b42b9ac0-2da9-426b-ba8a-1dc091249aaa Co-authored-by: CamKemBell <217516035+CamKemBell@users.noreply.github.com> * Polish modal close button cancellation Agent-Logs-Url: https://github.com/CamKemBell/filament/sessions/b42b9ac0-2da9-426b-ba8a-1dc091249aaa Co-authored-by: CamKemBell <217516035+CamKemBell@users.noreply.github.com> * revert: back to original code * refactor: support for conditional cancellation of parent actions on modal close * refactor: rename modal close button unmount action methods for clarity * refactor: simplify modal close button event handler logic * refactor: simplify modal close button event handler logic --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: CamKemBell <217516035+CamKemBell@users.noreply.github.com> Co-authored-by: Cam Kemshal-Bell <cam@foremind.com.au>
Contributor
Author
|
do you want to keep the backdrop and the extra attribute bag?
keep backdrop <div
aria-hidden="true"
x-show="isOpen"
@unless($isClickThrough)
x-transition.duration.300ms.opacity
@endunless
{{
($extraModalOverlayAttributeBag ?? new \Illuminate\View\ComponentAttributeBag)->class([
'fi-modal-close-overlay' => ! $isClickThrough,
'pointer-events-none' => $isClickThrough,
])
}}
></div>remove backdrop (current) @unless($isClickThrough)
<div
aria-hidden="true"
x-show="isOpen"
x-transition.duration.300ms.opacity
{{
($extraModalOverlayAttributeBag ?? new \Illuminate\View\ComponentAttributeBag)->class([
'fi-modal-close-overlay',
])
}}
></div>
@endunless |
Contributor
Author
|
If we want to prevent accessibility issues we could override the feature if the modal contains a form: // packages/support/resources/views/components/modal/index.blade.php, line 65
$isClickThrough = $clickThrough && !$closeByClickingAway && blank($wireSubmitHandler);Please tell me if you want that change... |
Contributor
|
Awesome! That's exactly what I needed and I'm working on until now. |
* Add modal dismissal parent action API Agent-Logs-Url: https://github.com/CamKemBell/filament/sessions/53b18b70-43ab-41f7-9798-48fd987b9baf Co-authored-by: CamKemBell <217516035+CamKemBell@users.noreply.github.com> * Refine modal dismissal API readability Agent-Logs-Url: https://github.com/CamKemBell/filament/sessions/53b18b70-43ab-41f7-9798-48fd987b9baf Co-authored-by: CamKemBell <217516035+CamKemBell@users.noreply.github.com> * Fix modal dismissal flag handling Agent-Logs-Url: https://github.com/CamKemBell/filament/sessions/53b18b70-43ab-41f7-9798-48fd987b9baf Co-authored-by: CamKemBell <217516035+CamKemBell@users.noreply.github.com> * core: remove modalCloseButton method * core: remove deprecate tests * docs: update modal documentation to reflect deprecation of modalCloseButton --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: CamKemBell <217516035+CamKemBell@users.noreply.github.com> Co-authored-by: Cam Kemshal-Bell <cam@foremind.com.au>
…n behavior under a new section
tanthammar
force-pushed
the
modal-click-through
branch
from
d8520e1 to
a0dcc15
Compare
danharrin
approved these changes
Jul 5, 2026
danharrin
added
awaiting next minor version
and removed
awaiting next minor version
labels
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Adds:
modalClickThrough(bool $condition = true)to the ModalComponentmodalClickThrough(bool | Closure | null $condition = true)to Concerns\CanOpenModalWhen enabled, the modal backdrop becomes fully transparent to pointer events and the focus trap is removed, allowing users to interact with content behind the modal while it remains open.
Intended use case
Text only modals/slide-overs that stay open while the user can interact with the page behind/next to the modal.
(Example, show a narrow slide over with help documentation while the user fills out a form.)
Accessibility
By removing x-trap, tab order may be a concern if used with modals containing a form. Suggesting to add a note to documentation.
Visual changes
Functional changes
composer cscommand.