fix(chips): use notifyRemoval and notifyInteraction adapter methods (#…

…277)

packages/chips/Chip.js

@@ -78,13 +78,20 @@ export class Chip extends Component {
         (propertyName) => window.getComputedStyle(this.chipElement_).getPropertyValue(propertyName),
       setStyleProperty: (propertyName, value) => this.chipElement_.style.setProperty(propertyName, value),
       notifyRemoval: () => this.props.handleRemove(this.props.id),
+      notifyInteraction: () => this.props.handleSelect(this.props.id),
     };
   }
 
   onClick = (e) => {
-    const {onClick, handleSelect, id} = this.props;
+    const {onClick} = this.props;
     onClick(e);
-    handleSelect(id);
+    this.foundation_.handleInteraction(e);
+  }
+
+  onKeyDown = (e) => {
+    const {onKeyDown} = this.props;
+    onKeyDown(e);
+    this.foundation_.handleInteraction(e);
   }
 
   handleRemoveIconClick = (e) => this.foundation_.handleTrailingIconInteraction(e);
@@ -140,6 +147,7 @@ export class Chip extends Component {
       handleSelect,
       handleRemove,
       onClick,
+      onKeyDown,
       computeBoundingRect,
       initRipple,
       unbounded,
@@ -156,6 +164,7 @@ export class Chip extends Component {
         tabIndex='0'
         className={this.classes}
         onClick={this.onClick}
+        onKeyDown={this.onKeyDown}
         onTransitionEnd={this.handleTransitionEnd}
         ref={this.init}
         {...otherProps}
@@ -177,6 +186,7 @@ Chip.propTypes = {
   handleSelect: PropTypes.func,
   handleRemove: PropTypes.func,
   onClick: PropTypes.func,
+  onKeyDown: PropTypes.func,
   initRipple: PropTypes.func,
   unbounded: PropTypes.bool,
   chipCheckmark: PropTypes.node,
@@ -190,6 +200,7 @@ Chip.defaultProps = {
   className: '',
   selected: false,
   onClick: () => {},
+  onKeyDown: () => {},
   initRipple: () => {},
   handleSelect: () => {},
   handleRemove: () => {},

packages/chips/ChipSet.js

@@ -80,13 +80,16 @@ export default class ChipSet extends Component {
       if (this.props.selectedChipIds.indexOf(id) > -1) {
         this.foundation_.select(id);
       } else {
+        // remove deselect when MDC Web issue 3612 is fixed
         this.foundation_.deselect(id);
       }
     });
   }
 
   handleSelect = (chipId) => {
     const {handleSelect, choice, filter} = this.props;
+    // update when mdc web issue is fix
+    // https://github.com/material-components/material-components-web/issues/3613
     if (filter || choice) {
       this.foundation_.toggleSelect(chipId);
     }
@@ -98,6 +101,7 @@ export default class ChipSet extends Component {
     if (input) {
       // this should be calling foundation_.handleChipRemoval, but we would
       // need to pass evt.detail.chipId
+      // fix when MDC Web issue 3613 is fixed
       this.foundation_.deselect(chipId);
     }
     handleRemove(chipId);