diff --git a/packages/mdc-chips/README.md b/packages/mdc-chips/README.md index 65bf0f4980d..97499d0de00 100644 --- a/packages/mdc-chips/README.md +++ b/packages/mdc-chips/README.md @@ -154,6 +154,7 @@ To use the `MDCChip` and `MDCChipSet` classes, [import](../../docs/importing-js. Method Signature | Description --- | --- +`get foundation() => MDCChipFoundation` | Returns the foundation `toggleSelected() => void` | Proxies to the foundation's `toggleSelected` method Property | Value Type | Description @@ -182,8 +183,10 @@ Method Signature | Description `deregisterEventHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the root 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 +`notifyInteraction() => void` | Emits a custom event `MDCChip:interaction` denoting the chip has been interacted with +`notifyTrailingIconInteraction() => void` | Emits a custom event `MDCChip:trailingIconInteraction` denoting the chip's trailing icon has been interacted with + +> _NOTE_: The custom events emitted by `notifyInteraction` and `notifyTrailingIconInteraction` must pass along the target chip in its event `detail`, as well as bubble to the parent `mdc-chip-set` element. #### `MDCChipSetAdapter` diff --git a/packages/mdc-chips/chip-set/foundation.js b/packages/mdc-chips/chip-set/foundation.js index 7b3b1f9f3d3..b32b95c3275 100644 --- a/packages/mdc-chips/chip-set/foundation.js +++ b/packages/mdc-chips/chip-set/foundation.js @@ -17,8 +17,7 @@ import MDCFoundation from '@material/base/foundation'; import MDCChipSetAdapter from './adapter'; -// eslint-disable-next-line no-unused-vars -import {MDCChip, MDCChipFoundation} from '../chip/index'; +import MDCChipFoundation from '../chip/foundation'; import {strings, cssClasses} from './constants'; /** @@ -57,7 +56,7 @@ class MDCChipSetFoundation extends MDCFoundation { /** * The selected chips in the set. Only used for choice chip set or filter chip set. - * @private {!Array} + * @private {!Array} */ this.selectedChips_ = []; @@ -81,25 +80,25 @@ class MDCChipSetFoundation extends MDCFoundation { * @private */ handleChipInteraction_(evt) { - const {chip} = evt.detail; + const chipFoundation = evt.detail.chip.foundation; if (this.adapter_.hasClass(cssClasses.CHOICE)) { if (this.selectedChips_.length === 0) { - this.selectedChips_[0] = chip; - } else if (this.selectedChips_[0] !== chip) { + this.selectedChips_[0] = chipFoundation; + } else if (this.selectedChips_[0] !== chipFoundation) { this.selectedChips_[0].toggleSelected(); - this.selectedChips_[0] = chip; + this.selectedChips_[0] = chipFoundation; } else { this.selectedChips_ = []; } - chip.toggleSelected(); + chipFoundation.toggleSelected(); } else if (this.adapter_.hasClass(cssClasses.FILTER)) { - const index = this.selectedChips_.indexOf(chip); + const index = this.selectedChips_.indexOf(chipFoundation); if (index >= 0) { this.selectedChips_.splice(index, 1); } else { - this.selectedChips_.push(chip); + this.selectedChips_.push(chipFoundation); } - chip.toggleSelected(); + chipFoundation.toggleSelected(); } } } diff --git a/packages/mdc-chips/chip/index.js b/packages/mdc-chips/chip/index.js index bdc9cdb4499..a0013453fe2 100644 --- a/packages/mdc-chips/chip/index.js +++ b/packages/mdc-chips/chip/index.js @@ -59,6 +59,13 @@ class MDCChip extends MDCComponent { this.foundation_.toggleSelected(); } + /** + * @return {!MDCChipFoundation} + */ + get foundation() { + return this.foundation_; + } + /** * @return {!MDCChipFoundation} */ diff --git a/test/unit/mdc-chips/mdc-chip-set.foundation.test.js b/test/unit/mdc-chips/mdc-chip-set.foundation.test.js index 4b572e2813d..9e9d141a129 100644 --- a/test/unit/mdc-chips/mdc-chip-set.foundation.test.js +++ b/test/unit/mdc-chips/mdc-chip-set.foundation.test.js @@ -42,10 +42,14 @@ const setupTest = () => { const mockAdapter = td.object(MDCChipSetFoundation.defaultAdapter); const foundation = new MDCChipSetFoundation(mockAdapter); const chipA = td.object({ - toggleSelected: () => {}, + foundation: { + toggleSelected: () => {}, + }, }); const chipB = td.object({ - toggleSelected: () => {}, + foundation: { + toggleSelected: () => {}, + }, }); return {foundation, mockAdapter, chipA, chipB}; }; @@ -81,7 +85,7 @@ test('on custom MDCChip:interaction event toggles selected state with single sel chip: chipA, }, }); - td.verify(chipA.toggleSelected()); + td.verify(chipA.foundation.toggleSelected()); assert.equal(foundation.selectedChips_.length, 1); chipInteractionHandler({ @@ -89,8 +93,8 @@ test('on custom MDCChip:interaction event toggles selected state with single sel chip: chipB, }, }); - td.verify(chipA.toggleSelected()); - td.verify(chipB.toggleSelected()); + td.verify(chipA.foundation.toggleSelected()); + td.verify(chipB.foundation.toggleSelected()); assert.equal(foundation.selectedChips_.length, 1); chipInteractionHandler({ @@ -98,7 +102,7 @@ test('on custom MDCChip:interaction event toggles selected state with single sel chip: chipB, }, }); - td.verify(chipB.toggleSelected()); + td.verify(chipB.foundation.toggleSelected()); assert.equal(foundation.selectedChips_.length, 0); }); @@ -119,7 +123,7 @@ test('on custom MDCChip:interaction event toggles selected state with multi-sele chip: chipA, }, }); - td.verify(chipA.toggleSelected()); + td.verify(chipA.foundation.toggleSelected()); assert.equal(foundation.selectedChips_.length, 1); chipInteractionHandler({ @@ -127,7 +131,7 @@ test('on custom MDCChip:interaction event toggles selected state with multi-sele chip: chipB, }, }); - td.verify(chipB.toggleSelected()); + td.verify(chipB.foundation.toggleSelected()); assert.equal(foundation.selectedChips_.length, 2); chipInteractionHandler({ @@ -135,7 +139,7 @@ test('on custom MDCChip:interaction event toggles selected state with multi-sele chip: chipB, }, }); - td.verify(chipB.toggleSelected()); + td.verify(chipB.foundation.toggleSelected()); assert.equal(foundation.selectedChips_.length, 1); chipInteractionHandler({ @@ -143,6 +147,6 @@ test('on custom MDCChip:interaction event toggles selected state with multi-sele chip: chipA, }, }); - td.verify(chipA.toggleSelected()); + td.verify(chipA.foundation.toggleSelected()); assert.equal(foundation.selectedChips_.length, 0); });