Skip to content

Add closePredicate option to dialog #25174

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from

Conversation

crisbeto
Copy link
Member

Adds the closePredicate config option to the CDK and Material dialogs that allows developers to programmatically determine whether the user is allowed to close a dialog.

@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent target: minor This PR is targeted for the next minor release merge: preserve commits When the PR is merged, a rebase and merge should be performed labels Jun 28, 2022
@@ -57,6 +57,13 @@ export class DialogConfig<D = unknown, R = unknown, C extends BasePortalOutlet =
/** Whether the dialog closes with the escape key or pointer events outside the panel element. */
disableClose?: boolean = false;

/** Function used to determine whether the dialog is allowed to close. */
closePredicate?: <Result = unknown, Component = unknown>(
Copy link
Member Author

@crisbeto crisbeto Jun 28, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm somewhat on the fence about this API, because technically you can do the same by combining existing APIs and being careful with your event handlers, but I decided to implement it since there's clearly demand for it in #14292 and it can be easy for users to mess up if they do it themselves.

There's an overlap with disableClose and initially my thought was to change disableClose to also accept a function, but the problem is that it only applies to attempts at closing the dialog using the backdrop or the escape key, not programmatic closes or by something like the matDialogClose directive.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm also iffy about this API.

  • It's typically an a11y issue to prevent dialogs from closing on escape/outside click; this might encourage more of that
  • The name could be misleading, because what we're really doing is something like disableCloseFromUserInteractionPredicate. That is, it doesn't prevent closing via API call . This is especially confusing with matDialogClose.

I know the current disableClose also has these issues- I'd be more inclined to rename that to simplify this (something like disableCloseOnInteraction or disableDefaultCloseActions)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The idea with the new API is that it blocks all the close calls, even the programmatic ones, whereas disableClose was only for the backdrop and escape keys. The primary use case for this is if you have a form and you want to prevent the user from accidentally closing it based on a certain condition.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can be on board with this if we rename disableClose to avoid confusion between the two (deprecating the current name for the appropriate time)

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm interested in this feature. Would this new API block the modal from being closed if matDialog.closeAll() was called?

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

any update on this?

crisbeto added 2 commits June 28, 2022 13:20
Adds the `closePredicate` config option to the CDK dialog that allows developers to programmatically determine whether the user is allowed to close a dialog.

Also adds some test coverage that we had in the Material dialog, but not the CDK one.
Adds the `closePredicate` config option to the Material dialog that allows developers to programmatically determine whether the user is allowed to close a dialog.
@crisbeto crisbeto force-pushed the 14292/dialog-close-predicate branch from 52febfc to 98cf6b9 Compare June 28, 2022 11:20
@josephperrott josephperrott removed the request for review from a team June 28, 2022 14:12
@devversion devversion removed their request for review July 12, 2022 12:16
@josephperrott josephperrott requested a review from a team as a code owner December 18, 2024 17:40
@crisbeto
Copy link
Member Author

Closing in favor of #30919.

@crisbeto crisbeto closed this Apr 22, 2025
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators May 23, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
merge: preserve commits When the PR is merged, a rebase and merge should be performed P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent target: minor This PR is targeted for the next minor release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants