Material-components-web-components: [Feature Request] mwc-dialog prevent closing on scrim click

Created on 8 Dec 2019  路  3Comments  路  Source: material-components/material-components-web-components

I'm submitting a:

  • [ ] bug report
  • [x] feature request

Current behavior:
Clicking the scrim (outside the dialog) will close the dialog.

Expected behavior:
A way to prevent this.

There are some situations in an app where you need the user to take a decisive action.
For instance let's say you need the user to accept some conditions, there are 2 choices "accept" or "dismiss".
In a normal context clicking out a dialog means "cancel", in a decisive action where you can't cancel the action the "cancel" action is interpreted as "dismiss". In this instance if the conditions are dismissed we want the user to be redirected to the referer. If the user unintentionally or not clicks outside the dialog (dismiss) he will get redirected, that's ambiguous and can confuse him. There are some cases where we want to make sure the user reads and interacts with the dialog and the buttons before proceeding further. I request a way to prevent the dialog to close on scrim click.

Idea:

<mwc-dialog preventScrimAction>
  ...
</mwc-dialog>

Current workaround:

dialog.addEventListener('closing', (e: CustomEvent) => {
  if (e.detail.action === 'close') {
    dialog.open = true
  }
})

Most helpful comment

I just set scrimClickAction="" and it seems to work

All 3 comments

I'd prefer veto callbacks for all dialog actions.

@holgerengels The problem with this workaround is it will reopen the dialog if the action was close and on some tested devices it creates an unwanted blinking effect.

I just set scrimClickAction="" and it seems to work

Was this page helpful?
0 / 5 - 0 ratings