fix(dialog): allow click events to propagate (#869)

Close #794

packages/mdc-dialog/foundation.js

@@ -52,7 +52,11 @@ export default class MDCDialogFoundation extends MDCFoundation {
   constructor(adapter) {
     super(Object.assign(MDCDialogFoundation.defaultAdapter, adapter));
     this.isOpen_ = false;
-    this.componentClickHandler_ = () => this.cancel(true);
+    this.componentClickHandler_ = (evt) => {
+      if (this.adapter_.eventTargetHasClass(evt.target, cssClasses.BACKDROP)) {
+        this.cancel(true);
+      }
+    };
     this.dialogClickHandler_ = (evt) => this.handleDialogClick_(evt);
     this.documentKeydownHandler_ = (evt) => {
       if (evt.key && evt.key === 'Escape' || evt.keyCode === 27) {
@@ -119,7 +123,6 @@ export default class MDCDialogFoundation extends MDCFoundation {
   }
 
   handleDialogClick_(evt) {
-    evt.stopPropagation();
     const {target} = evt;
     if (this.adapter_.eventTargetHasClass(target, cssClasses.ACCEPT_BTN)) {
       this.accept(true);

test/unit/mdc-dialog/foundation.test.js

@@ -185,20 +185,6 @@ test('#cancel calls notifyCancel when shouldNotify is set to true', () => {
   td.verify(mockAdapter.notifyCancel());
 });
 
-test('on dialog surface click calls evt.stopPropagation() to prevent click from propagating to background el', () => {
-  const {foundation, mockAdapter} = setupTest();
-  const handlers = captureHandlers(mockAdapter, 'registerSurfaceInteractionHandler');
-  const evt = {
-    stopPropagation: td.func('evt.stopPropagation'),
-    target: {},
-  };
-
-  foundation.open();
-  handlers.click(evt);
-
-  td.verify(evt.stopPropagation());
-});
-
 test('on dialog surface click closes and notifies acceptance if event target is the accept button', () => {
   const {foundation, mockAdapter} = setupTest();
   const handlers = captureHandlers(mockAdapter, 'registerSurfaceInteractionHandler');
@@ -246,17 +232,39 @@ test('on dialog surface click does not close or notify if the event target is no
   td.verify(mockAdapter.notifyAccept(), {times: 0});
 });
 
-test('on click closese the dialog and notifies cancellation', () => {
+test('on click closes the dialog and notifies cancellation if event target is the backdrop', () => {
   const {foundation, mockAdapter} = setupTest();
   const handlers = captureHandlers(mockAdapter, 'registerInteractionHandler');
+  const evt = {
+    stopPropagation: () => {},
+    target: {},
+  };
+
+  td.when(mockAdapter.eventTargetHasClass(evt.target, cssClasses.BACKDROP)).thenReturn(true);
 
   foundation.open();
-  handlers.click();
+  handlers.click(evt);
 
   td.verify(mockAdapter.removeClass(cssClasses.OPEN));
   td.verify(mockAdapter.notifyCancel());
 });
 
+test('on click does not close or notify cancellation if event target is the surface', () => {
+  const {foundation, mockAdapter} = setupTest();
+  const handlers = captureHandlers(mockAdapter, 'registerInteractionHandler');
+  const evt = {
+    stopPropagation: () => {},
+    target: {},
+  };
+
+  td.when(mockAdapter.eventTargetHasClass(evt.target, cssClasses.BACKDROP)).thenReturn(false);
+
+  foundation.open();
+  handlers.click(evt);
+
+  td.verify(mockAdapter.removeClass(cssClasses.OPEN), {times: 0});
+});
+
 test('on document keydown closes the dialog when escape key is pressed', () => {
   const {foundation, mockAdapter} = setupTest();
   let keydown;