Skip to content

Add escapable prop to modals#2677

Open
joshhanley wants to merge 1 commit into
mainfrom
josh/modal-escapable-prop
Open

Add escapable prop to modals#2677
joshhanley wants to merge 1 commit into
mainfrom
josh/modal-escapable-prop

Conversation

@joshhanley

Copy link
Copy Markdown
Member

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.

<flux:modal
    name="mymodal"
    :dismissible="false"
    :closable="false"
>
    foo
</flux:modal>

The Problem

Flux Pro needs an internal disable-escape modal 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:modal component 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 escapable prop to flux:modal.

This keeps the modal closing controls aligned with the behaviours they already represent. dismissible is documented as controlling outside-click dismissal: “If false, prevents closing the modal by clicking outside.” closable is documented as controlling the close button: “If false, 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:modal renders the internal disable-escape marker on ui-modal, which the companion Flux Pro PR handles at the JavaScript layer.

<flux:modal
    :dismissible="false"
    :escapable="false"
    :closable="false"
>
    ...
</flux:modal>

Fixes #2676

@joshhanley joshhanley changed the title Add prop to modals Add escapable prop to modals Jul 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Non dismissable modals can still be dismissed using ESC.

1 participant