fix(chips): Emit custom event from trailing icon (#2286)

Also don't trigger a ripple when interacting with the trailing icon

BREAKING CHANGE: New MDCChipAdapter methods for handling trailing icons must be implemented.

Author: bonniezhou

packages/mdc-chips/README.md

@@ -144,7 +144,10 @@ Method Signature | Description
 `hasClass(className: string) => boolean` | Returns true if the root element contains the given class
 `registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the root element
 `deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the root element
-`notifyInteraction() => void` | Emits a custom event "MDCChip:interaction" denoting the chip has been interacted with, which bubbles to the parent `mdc-chip-set` element
+`registerTrailingIconInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the trailing icon element
+`deregisterTrailingIconInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the trailing icon element
+`notifyInteraction() => void` | Emits a custom event `MDCChip:interaction` denoting the chip has been interacted with, which bubbles to the parent `mdc-chip-set` element
+`notifyTrailingIconInteraction() => void` | Emits a custom event `MDCChip:trailingIconInteraction` denoting the chip's trailing icon has been interacted with, which bubbles to the parent `mdc-chip-set` element
 
 #### `MDCChipSetAdapter`
 

packages/mdc-chips/chip/adapter.js

@@ -61,11 +61,31 @@ class MDCChipAdapter {
    */
   deregisterInteractionHandler(evtType, handler) {}
 
+  /**
+   * Registers an event listener on the trailing icon element for a given event.
+   * @param {string} evtType
+   * @param {function(!Event): undefined} handler
+   */
+  registerTrailingIconInteractionHandler(evtType, handler) {}
+
+  /**
+   * Deregisters an event listener on the trailing icon element for a given event.
+   * @param {string} evtType
+   * @param {function(!Event): undefined} handler
+   */
+  deregisterTrailingIconInteractionHandler(evtType, handler) {}
+
   /**
    * Emits a custom "MDCChip:interaction" event denoting the chip has been
    * interacted with (typically on click or keydown).
    */
   notifyInteraction() {}
+
+  /**
+   * Emits a custom "MDCChip:trailingIconInteraction" event denoting the trailing icon has been
+   * interacted with (typically on click or keydown).
+   */
+  notifyTrailingIconInteraction() {}
 }
 
 export default MDCChipAdapter;

packages/mdc-chips/chip/constants.js

@@ -18,6 +18,8 @@
 /** @enum {string} */
 const strings = {
   INTERACTION_EVENT: 'MDCChip:interaction',
+  TRAILING_ICON_INTERACTION_EVENT: 'MDCChip:trailingIconInteraction',
+  TRAILING_ICON_SELECTOR: '.mdc-chip__icon--trailing',
 };
 
 /** @enum {string} */

packages/mdc-chips/chip/foundation.js

@@ -47,7 +47,10 @@ class MDCChipFoundation extends MDCFoundation {
       hasClass: () => {},
       registerInteractionHandler: () => {},
       deregisterInteractionHandler: () => {},
+      registerTrailingIconInteractionHandler: () => {},
+      deregisterTrailingIconInteractionHandler: () => {},
       notifyInteraction: () => {},
+      notifyTrailingIconInteraction: () => {},
     });
   }
 
@@ -59,17 +62,27 @@ class MDCChipFoundation extends MDCFoundation {
 
     /** @private {function(!Event): undefined} */
     this.interactionHandler_ = (evt) => this.handleInteraction_(evt);
+    /** @private {function(!Event): undefined} */
+    this.trailingIconInteractionHandler_ = (evt) => this.handleTrailingIconInteraction_(evt);
   }
 
   init() {
     ['click', 'keydown'].forEach((evtType) => {
       this.adapter_.registerInteractionHandler(evtType, this.interactionHandler_);
+      this.adapter_.registerTrailingIconInteractionHandler(evtType, this.trailingIconInteractionHandler_);
+    });
+    ['touchstart', 'pointerdown', 'mousedown'].forEach((evtType) => {
+      this.adapter_.registerTrailingIconInteractionHandler(evtType, this.trailingIconInteractionHandler_);
     });
   }
 
   destroy() {
     ['click', 'keydown'].forEach((evtType) => {
       this.adapter_.deregisterInteractionHandler(evtType, this.interactionHandler_);
+      this.adapter_.deregisterTrailingIconInteractionHandler(evtType, this.trailingIconInteractionHandler_);
+    });
+    ['touchstart', 'pointerdown', 'mousedown'].forEach((evtType) => {
+      this.adapter_.deregisterTrailingIconInteractionHandler(evtType, this.trailingIconInteractionHandler_);
     });
   }
 
@@ -93,6 +106,18 @@ class MDCChipFoundation extends MDCFoundation {
       this.adapter_.notifyInteraction();
     }
   }
+
+  /**
+   * Handles an interaction event on the trailing icon element. This is used to
+   * prevent the ripple from activating on interaction with the trailing icon.
+   * @param {!Event} evt
+   */
+  handleTrailingIconInteraction_(evt) {
+    evt.stopPropagation();
+    if (evt.type === 'click' || evt.key === 'Enter' || evt.keyCode === 13) {
+      this.adapter_.notifyTrailingIconInteraction();
+    }
+  }
 }
 
 export default MDCChipFoundation;

packages/mdc-chips/chip/index.js

@@ -67,7 +67,21 @@ class MDCChip extends MDCComponent {
       hasClass: (className) => this.root_.classList.contains(className),
       registerInteractionHandler: (evtType, handler) => this.root_.addEventListener(evtType, handler),
       deregisterInteractionHandler: (evtType, handler) => this.root_.removeEventListener(evtType, handler),
+      registerTrailingIconInteractionHandler: (evtType, handler) => {
+        const trailingIconEl = this.root_.querySelector(strings.TRAILING_ICON_SELECTOR);
+        if (trailingIconEl) {
+          trailingIconEl.addEventListener(evtType, handler);
+        }
+      },
+      deregisterTrailingIconInteractionHandler: (evtType, handler) => {
+        const trailingIconEl = this.root_.querySelector(strings.TRAILING_ICON_SELECTOR);
+        if (trailingIconEl) {
+          trailingIconEl.removeEventListener(evtType, handler);
+        }
+      },
       notifyInteraction: () => this.emit(strings.INTERACTION_EVENT, {chip: this}, true /* shouldBubble */),
+      notifyTrailingIconInteraction: () => this.emit(
+        strings.TRAILING_ICON_INTERACTION_EVENT, {chip: this}, true /* shouldBubble */),
     })));
   }
 

test/unit/mdc-chips/mdc-chip.foundation.test.js

@@ -17,7 +17,7 @@
 import {assert} from 'chai';
 import td from 'testdouble';
 
-import {verifyDefaultAdapter} from '../helpers/foundation';
+import {verifyDefaultAdapter, captureHandlers} from '../helpers/foundation';
 import {setupFoundationTest} from '../helpers/setup';
 import MDCChipFoundation from '../../../packages/mdc-chips/chip/foundation';
 
@@ -36,7 +36,9 @@ test('exports cssClasses', () => {
 test('defaultAdapter returns a complete adapter implementation', () => {
   verifyDefaultAdapter(MDCChipFoundation, [
     'addClass', 'removeClass', 'hasClass',
+    'registerTrailingIconInteractionHandler', 'deregisterTrailingIconInteractionHandler',
     'registerInteractionHandler', 'deregisterInteractionHandler', 'notifyInteraction',
+    'notifyTrailingIconInteraction',
   ]);
 });
 
@@ -48,6 +50,11 @@ test('#init adds event listeners', () => {
 
   td.verify(mockAdapter.registerInteractionHandler('click', td.matchers.isA(Function)));
   td.verify(mockAdapter.registerInteractionHandler('keydown', td.matchers.isA(Function)));
+  td.verify(mockAdapter.registerTrailingIconInteractionHandler('click', td.matchers.isA(Function)));
+  td.verify(mockAdapter.registerTrailingIconInteractionHandler('keydown', td.matchers.isA(Function)));
+  td.verify(mockAdapter.registerTrailingIconInteractionHandler('touchstart', td.matchers.isA(Function)));
+  td.verify(mockAdapter.registerTrailingIconInteractionHandler('pointerdown', td.matchers.isA(Function)));
+  td.verify(mockAdapter.registerTrailingIconInteractionHandler('mousedown', td.matchers.isA(Function)));
 });
 
 test('#destroy removes event listeners', () => {
@@ -56,6 +63,11 @@ test('#destroy removes event listeners', () => {
 
   td.verify(mockAdapter.deregisterInteractionHandler('click', td.matchers.isA(Function)));
   td.verify(mockAdapter.deregisterInteractionHandler('keydown', td.matchers.isA(Function)));
+  td.verify(mockAdapter.deregisterTrailingIconInteractionHandler('click', td.matchers.isA(Function)));
+  td.verify(mockAdapter.deregisterTrailingIconInteractionHandler('keydown', td.matchers.isA(Function)));
+  td.verify(mockAdapter.deregisterTrailingIconInteractionHandler('touchstart', td.matchers.isA(Function)));
+  td.verify(mockAdapter.deregisterTrailingIconInteractionHandler('pointerdown', td.matchers.isA(Function)));
+  td.verify(mockAdapter.deregisterTrailingIconInteractionHandler('mousedown', td.matchers.isA(Function)));
 });
 
 test('#toggleActive adds mdc-chip--activated class if the class does not exist', () => {
@@ -76,17 +88,28 @@ test('#toggleActive removes mdc-chip--activated class if the class exists', () =
 
 test('on click, emit custom event', () => {
   const {foundation, mockAdapter} = setupTest();
+  const handlers = captureHandlers(mockAdapter, 'registerInteractionHandler');
   const mockEvt = {
     type: 'click',
   };
-  let click;
-
-  td.when(mockAdapter.registerInteractionHandler('click', td.matchers.isA(Function))).thenDo((evtType, handler) => {
-    click = handler;
-  });
 
   foundation.init();
-  click(mockEvt);
+  handlers.click(mockEvt);
 
   td.verify(mockAdapter.notifyInteraction());
 });
+
+test('on click in trailing icon, emit custom event', () => {
+  const {foundation, mockAdapter} = setupTest();
+  const handlers = captureHandlers(mockAdapter, 'registerTrailingIconInteractionHandler');
+  const mockEvt = {
+    type: 'click',
+    stopPropagation: td.func('stopPropagation'),
+  };
+
+  foundation.init();
+  handlers.click(mockEvt);
+
+  td.verify(mockAdapter.notifyTrailingIconInteraction());
+  td.verify(mockEvt.stopPropagation());
+});

test/unit/mdc-chips/mdc-chip.test.js

@@ -78,8 +78,37 @@ test('#adapter.deregisterInteractionHandler removes event listener for a given e
   td.verify(handler(td.matchers.anything()), {times: 0});
 });
 
-test('#adapter.notifyInteraction emits ' +
-  `${MDCChipFoundation.strings.INTERACTION_EVENT}`, () => {
+test('#adapter.registerTrailingIconInteractionHandler adds event listener for a given event to the trailing' +
+'icon element', () => {
+  const {root, component} = setupTest();
+  const icon = bel`
+    <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing" tabindex="0" role="button">cancel</i>
+  `;
+  root.appendChild(icon);
+  const handler = td.func('click handler');
+  component.getDefaultFoundation().adapter_.registerTrailingIconInteractionHandler('click', handler);
+  domEvents.emit(icon, 'click');
+
+  td.verify(handler(td.matchers.anything()));
+});
+
+test('#adapter.deregisterTrailingIconInteractionHandler removes event listener for a given event from the trailing ' +
+'icon element', () => {
+  const {root, component} = setupTest();
+  const icon = bel`
+    <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing" tabindex="0" role="button">cancel</i>
+  `;
+  root.appendChild(icon);
+  const handler = td.func('click handler');
+
+  icon.addEventListener('click', handler);
+  component.getDefaultFoundation().adapter_.deregisterTrailingIconInteractionHandler('click', handler);
+  domEvents.emit(icon, 'click');
+
+  td.verify(handler(td.matchers.anything()), {times: 0});
+});
+
+test('#adapter.notifyInteraction emits ' + MDCChipFoundation.strings.INTERACTION_EVENT, () => {
   const {component} = setupTest();
   const handler = td.func('interaction handler');
 
@@ -90,6 +119,18 @@ test('#adapter.notifyInteraction emits ' +
   td.verify(handler(td.matchers.anything()));
 });
 
+test('#adapter.notifyTrailingIconInteraction emits ' +
+  MDCChipFoundation.strings.TRAILING_ICON_INTERACTION_EVENT, () => {
+  const {component} = setupTest();
+  const handler = td.func('interaction handler');
+
+  component.listen(
+    MDCChipFoundation.strings.TRAILING_ICON_INTERACTION_EVENT, handler);
+  component.getDefaultFoundation().adapter_.notifyTrailingIconInteraction();
+
+  td.verify(handler(td.matchers.anything()));
+});
+
 function setupMockFoundationTest(root = getFixture()) {
   const MockFoundationConstructor = td.constructor(MDCChipFoundation);
   const mockFoundation = new MockFoundationConstructor();