Add escapable prop to modals#2677
Open
joshhanley wants to merge 1 commit into
Open
Conversation
3 tasks
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.
The companion Flux Pro PR should be reviewed and merged before this PR: livewire/flux-pro#519
The Scenario
When rendering a modal that should require an explicit action before closing, there is currently no supported way to prevent Escape from closing it.
Setting
:dismissible="false"prevents outside-click dismissal, and setting:closable="false"hides the close button, but pressing Escape still closes the modal.The Problem
Flux Pro needs an internal
disable-escapemodal marker so the JavaScript layer can opt a modal out of browser Escape dismissal. That support is being added in livewire/flux-pro#519.Once that internal marker exists, the public
flux:modalcomponent still needs an API for rendering it. Without a public prop, users cannot opt out of Escape dismissal through Flux Blade components.The Solution
Add a separate
escapableprop toflux:modal.This keeps the modal closing controls aligned with the behaviours they already represent.
dismissibleis documented as controlling outside-click dismissal: “Iffalse, prevents closing the modal by clicking outside.”closableis documented as controlling the close button: “Iffalse, hides the close button.”We considered expanding
:dismissible="false"so it also prevented Escape dismissal. That would make the reported example work without a new prop, but it would also remove a useful distinction: users can currently prevent accidental click-away dismissal while still allowing Escape as a keyboard-driven way to leave the modal.With
:escapable="false", users can opt out of Escape dismissal explicitly. When this prop is false,flux:modalrenders the internaldisable-escapemarker onui-modal, which the companion Flux Pro PR handles at the JavaScript layer.Fixes #2676