[mdc-dialog] Actions 'scrimClickAction' and 'escapeKeyAction' doesn't return anything

[Jopie01]

You can close a mdc-dialog with:

1. The buttons in the dialog
2. The scrim
3. Escape-key

See also https://github.com/material-components/material-components-web/tree/master/packages/mdc-dialog#dialog-actions. However only the first one is working and the other two are not because the willClose and didClose functions in mdc-dialog.js only looks for the buttons. When closing the dialog with the scrim or escape-key this dialog gets hidden, but nothing is returned. Also there are situations you want to force the user to click on a button, so the scrim and escape-key actions should be disabled.

The biggest problem is what to do when those actions are not defined. Should they default be disabled or connected to a cancel / close action of a button.

[hilljh82]

@Jopie01 The latest release of this library (i.e., 1.x) using material-web-component 3.2.0. What you reference is master in material-web-components. Once we are done with updating this framework to 3.18 (to support Octane), which will be ember-cli-mdc@2.x, we will be building against material-components-web 6.x, not 7.x. Is this documentation (and functionality) the same for the 6.x release of material-web-components? If the answer is yes, then we will be sure to incorporate this functionality as part of the ember-cli-mdc@2.x

[Jopie01]

The latest release of this library (i.e., 1.x) using material-web-component 3.2.0.

Hmm, it seems those actions are already supported in version 3.2.0 if I'm not mistaken. See https://github.com/material-components/material-components-web/tree/v3.2.0/packages/mdc-dialog#dialog-actions I have a working version of this which fills my needs. Below the two functions which have been changed. I can now use scrimClickAction and escapeKeyAction in my templates.

  didInsertElement () {
    this._super (...arguments);

    this._dialog = new MDCDialog (this.element);
    this._dialog.listen ('MDCDialog:opening', this._willOpenEventListener);
    this._dialog.listen ('MDCDialog:opened', this._didOpenEventListener);
    this._dialog.listen ('MDCDialog:closing', this._willCloseEventListener);
    this._dialog.listen ('MDCDialog:closed', this._didCloseEventListener);
    // scrim action
    if (this.get('scrimClickAction') === undefined) {
      if (this.get('negativeButton') !== undefined) {
        this._dialog.scrimClickAction = this.get('negativeButton').closed;
      }
      else if (this.get('positiveButton') !== undefined) {
        this._dialog.scrimClickAction = this.get('positiveButton').closed;
      }
      else {
        this._dialog.scrimClickAction = '';
      }
    }
    else if (this.get('scrimClickAction') !== '') {
      this._dialog.scrimClickAction = this.get('scrimClickAction');
    }
    else {
      this._dialog.scrimClickAction = '';
    }

    // escapekey action
    if (this.get('escapeKeyAction') === undefined) {
      if (this.get('negativeButton') !== undefined) {
        this._dialog.escapeKeyAction = this.get('negativeButton').closed;
      }
      else if (this.get('positiveButton') !== undefined) {
        this._dialog.escapeKeyAction = this.get('positiveButton').closed;
      }
      else {
        this._dialog.escapeKeyAction = '';
      }
    }
    else if (this.get('escapeKeyAction') !== '') {
      this._dialog.escapeKeyAction = this.get('escapeKeyAction');
    }
    else {
      this._dialog.escapeKeyAction = '';
    }

    this._contentElement = this.element.querySelector ('.mdc-dialog__content');

    if (this.get ('show')) {
      this._dialog.open ();
    }
  },

  didClose ({detail: {action}}) {
    this.set ('show', false);

    let button = this._getButtonFromAction (action);

    if (isPresent ((button))) {
      getWithDefault (button, 'closed', noOp) ();
    }
    else if (isPresent ((this._dialog.scrimClickAction))) {
      this._dialog.scrimClickAction ();
    }
    else if (isPresent ((this._dialog.escapeKeyAction))) {
      this._dialog.escapeKeyAction ();
    }
  },

I'm pretty sure it can be cleaned up a lot, but it does the trick.

[hilljh82]

@Jopie01 Thanks for this. Yes, this will need to be cleaned up a bit, but it gives us a starting point. I will look into getting this put into a patch.

[hilljh82]

@Jopie01 I believe this issue has been resolved with the latest release the mdc-dialog package.