mdc-dialog with list items ; how to listen for clicks properly?

[mathieuprog]

I'd like to use the dialog with list items. Of course the purpose is for a user to select an item. See example on official site "choose a ringtone": https://material-components-web.appspot.com/dialog.html

However, I noticed that it's not possible by default for my list items to listen for clicks. It seems that the framework attaches an event handler on the dialog and stops propagation, not letting me any chance to handle the selection of an item.

$(document).ready(function() {
  const MDCDialog = mdc.dialog.MDCDialog;
  const dialog = new MDCDialog(document.getElementById('mdc-dialog-with-list'));
  dialog.show();
  
  $(document).on('click', '.mdc-list-item', function() {
    alert('hello');
  });
});

https://jsfiddle.net/ftmn974x/

I guess I need to write a new adapter for the foundation to let a click happen in a dialog? But that seems way too heavy.

What I don't get as well is that in the official example and guideline this kind of list is clearly a list of items that you can select. However,I have to implement the css when hovering an item myself as well as the event handlers (and as mentioned above maybe even rewrite an adapter for this simple issue?).

Thank you for any advice

[Garbee]

It seems wrong to me that the events are being eaten by the dialog. In a standard HTML <dialog> element this is not the case. The component MCW provides should reflect that natural state on the web.

@amsheehan Why are events not propagating out of the dialog? Is this defined by the spec somewhere because I don't recall it?

[amsheehan]

Okay, this may be as simple as just not using Event.stopPropagation() in the componentClickHandler_() of the dialog foundation's constructor

If someone would like to make a pull request with these changes I think it should solve the issues here and in #644 & #658

• Remove evt.stopPropagation() from handleDialogClick_() in mdc-dialog/foundation.js
• Check the evt.target's class list for the mdc-dialog__backdrop string using the eventTargetHasClass() adapter method
• Only call this.cancel() if the above check returns true, e.g.:

this.componentClickHandler_ = (evt) => {
  if (this.adapter_.eventTargetHasClass(evt.target, 'mdc-dialog__backdrop')) {
    this.cancel(true);
  }
};

We should potentially do this in mdc-drawer as well. If you would like to implement that too, please make it a separate commit.

Thanks everyone. We appreciate everyone's patience with this nasty little 🐛