Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit 283bd55

Browse files
authored
feat(chips): Add setSelectedFromChipset method (#4872)
1 parent 07078bb commit 283bd55

File tree

7 files changed

+45
-14
lines changed

7 files changed

+45
-14
lines changed

packages/mdc-chips/README.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -310,6 +310,7 @@ Method Signature | Description
310310
`focusPrimaryAction() => void` | Proxies to the foundation's `focusPrimaryAction` method
311311
`focusTrailingAction() => void` | Proxies to the foundation's `focusTrailingAction` method
312312
`removeFocus() => void` | Proxies to the foundation's `removeFocus` method
313+
`setSelectedFromChipSet(selected: boolean) => void` | Proxies to the foundation's `setSelectedFromChipset` method (only called from the chip set)
313314

314315
Property | Value Type | Description
315316
--- | --- | ---
@@ -392,7 +393,7 @@ Method Signature | Description
392393
--- | ---
393394
`hasClass(className: string) => boolean` | Returns whether the chip set element has the given class
394395
`removeChipAtIndex(index: number) => void` | Removes the chip with the given `index` from the chip set
395-
`selectChipAtIndex(index: string, selected: boolean) => void` | Sets the selected state of the chip at the given `index`
396+
`selectChipAtIndex(index: string, selected: boolean) => void` | Calls `MDCChip#setSelectedFromChipSet(selected)` on the chip at the given `index`
396397
`getIndexOfChipById(id: string) => number` | Returns the index of the chip with the matching `id` or -1
397398
`focusChipPrimaryActionAtIndex(index: number) => void` | Calls `MDCChip#focusPrimaryAction()` on the chip at the given `index`
398399
`focusChipTrailingActionAtIndex(index: number) => void` | Calls `MDCChip#focusTrailingAction()` on the chip at the given `index`
@@ -408,6 +409,7 @@ Method Signature | Description
408409
--- | ---
409410
`isSelected() => boolean` | Returns true if the chip is selected
410411
`setSelected(selected: boolean) => void` | Sets the chip's selected state
412+
`setSelectedFromChipSet(selected: boolean) => void` | Sets the chip's selected state (called from the chip set)
411413
`getShouldRemoveOnTrailingIconClick() => boolean` | Returns whether a trailing icon click should trigger exit/removal of the chip
412414
`setShouldRemoveOnTrailingIconClick(shouldRemove: boolean) => void` | Sets whether a trailing icon click should trigger exit/removal of the chip
413415
`getDimensions() => ClientRect` | Returns the dimensions of the chip. This is used for applying ripple to the chip.

packages/mdc-chips/chip-set/component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ export class MDCChipSet extends MDCComponent<MDCChipSetFoundation> {
132132
},
133133
selectChipAtIndex: (index, selected) => {
134134
if (index >= 0 && index < this.chips_.length) {
135-
this.chips_[index].selected = selected;
135+
this.chips_[index].setSelectedFromChipSet(selected);
136136
}
137137
},
138138
};

packages/mdc-chips/chip/component.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,10 @@ export class MDCChip extends MDCComponent<MDCChipFoundation> implements MDCRippl
217217
return new MDCChipFoundation(adapter);
218218
}
219219

220+
setSelectedFromChipSet(selected: boolean) {
221+
this.foundation_.setSelectedFromChipSet(selected);
222+
}
223+
220224
focusPrimaryAction() {
221225
this.foundation_.focusPrimaryAction();
222226
}

packages/mdc-chips/chip/foundation.ts

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -84,14 +84,11 @@ export class MDCChipFoundation extends MDCFoundation<MDCChipAdapter> {
8484
}
8585

8686
setSelected(selected: boolean) {
87-
if (selected) {
88-
this.adapter_.addClass(cssClasses.SELECTED);
89-
this.adapter_.setPrimaryActionAttr(strings.ARIA_CHECKED, 'true');
90-
} else {
91-
this.adapter_.removeClass(cssClasses.SELECTED);
92-
this.adapter_.setPrimaryActionAttr(strings.ARIA_CHECKED, 'false');
93-
}
94-
this.adapter_.notifySelection(selected);
87+
this.setSelected_(selected, true);
88+
}
89+
90+
setSelectedFromChipSet(selected: boolean) {
91+
this.setSelected_(selected, false);
9592
}
9693

9794
getShouldRemoveOnTrailingIconClick() {
@@ -327,6 +324,20 @@ export class MDCChipFoundation extends MDCFoundation<MDCChipAdapter> {
327324
const isDeletable = this.adapter_.hasClass(cssClasses.DELETABLE);
328325
return isDeletable && (evt.key === strings.BACKSPACE_KEY || evt.key === strings.DELETE_KEY);
329326
}
327+
328+
private setSelected_(selected: boolean, shouldNotify: boolean) {
329+
if (selected) {
330+
this.adapter_.addClass(cssClasses.SELECTED);
331+
this.adapter_.setPrimaryActionAttr(strings.ARIA_CHECKED, 'true');
332+
} else {
333+
this.adapter_.removeClass(cssClasses.SELECTED);
334+
this.adapter_.setPrimaryActionAttr(strings.ARIA_CHECKED, 'false');
335+
}
336+
337+
if (shouldNotify) {
338+
this.adapter_.notifySelection(selected);
339+
}
340+
}
330341
}
331342

332343
// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ class FakeChip {
5757
this.focusTrailingAction = td.func('.focusTrailingAction');
5858
this.remove = td.func('.remove');
5959
this.removeFocus = td.func('.removeFocus');
60+
this.setSelectedFromChipSet = td.func('.setSelectedFromChipSet');
6061
this.selected = false;
6162
}
6263
}
@@ -177,11 +178,11 @@ test('#adapter.removeChipAtIndex does nothing if the given object is not in the
177178
assert.equal(component.chips.length, 3);
178179
});
179180

180-
test('#adapter.selectChipAtIndex sets selected on chip object', () => {
181+
test('#adapter.selectChipAtIndex calls setSelectedFromChipSet on chip object', () => {
181182
const {component} = setupTest();
182183
const chip = component.chips[0];
183184
component.getDefaultFoundation().adapter_.selectChipAtIndex(0, true);
184-
assert.equal(chip.selected, true);
185+
td.verify(chip.setSelectedFromChipSet(true));
185186
});
186187

187188
test('#adapter.getChipListCount returns the number of chips', () => {

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,18 +92,25 @@ test('#setSelected sets aria-checked="false" if false', () => {
9292
td.verify(mockAdapter.setPrimaryActionAttr(strings.ARIA_CHECKED, 'false'));
9393
});
9494

95-
test('#setSelected removes calls adapter.notifySelection when selected is true', () => {
95+
test('#setSelected notifies of selection when selected is true', () => {
9696
const {foundation, mockAdapter} = setupTest();
9797
foundation.setSelected(true);
9898
td.verify(mockAdapter.notifySelection(true));
9999
});
100100

101-
test('#setSelected removes calls adapter.notifySelection when selected is false', () => {
101+
test('#setSelected notifies of unselection when selected is false', () => {
102102
const {foundation, mockAdapter} = setupTest();
103103
foundation.setSelected(false);
104104
td.verify(mockAdapter.notifySelection(false));
105105
});
106106

107+
test('#setSelectedFromChipSet does not notify', () => {
108+
const {foundation, mockAdapter} = setupTest();
109+
foundation.setSelectedFromChipSet(false);
110+
foundation.setSelectedFromChipSet(true);
111+
td.verify(mockAdapter.notifySelection(td.matchers.isA(Boolean)), {times: 0});
112+
});
113+
107114
test('#getDimensions returns adapter.getRootBoundingClientRect when there is no checkmark bounding rect', () => {
108115
const {foundation, mockAdapter} = setupTest();
109116
td.when(mockAdapter.getCheckmarkBoundingClientRect()).thenReturn(null);

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -420,6 +420,12 @@ test('#set shouldRemoveOnTrailingIconClick proxies to foundation', () => {
420420
td.verify(mockFoundation.setShouldRemoveOnTrailingIconClick(false));
421421
});
422422

423+
test('#setSelectedFromChipSet proxies to the same foundation method', () => {
424+
const {component, mockFoundation} = setupMockFoundationTest();
425+
component.setSelectedFromChipSet(true);
426+
td.verify(mockFoundation.setSelectedFromChipSet(true));
427+
});
428+
423429
test('#beginExit proxies to foundation', () => {
424430
const {component, mockFoundation} = setupMockFoundationTest();
425431
component.beginExit();

0 commit comments

Comments
 (0)