Skip to content

Commit

Permalink
fix(material-experimental/mdc-list): ensure selection change event fi…
Browse files Browse the repository at this point in the history
…res properly (#24174)

Leverages the new selection change event that we landed upstream
in MDC. The notify action adapter method was not suitable for the
event notification as it did not fire for e.g. CTRL + A selections
and was generally, semantically not guaranteed to fire on actual
interactive selections (like native controls emit the change event).
  • Loading branch information
devversion authored Jan 10, 2022
1 parent 853841c commit 38affc3
Show file tree
Hide file tree
Showing 2 changed files with 3 additions and 10 deletions.
9 changes: 1 addition & 8 deletions src/material-experimental/mdc-list/selection-list.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -424,14 +424,7 @@ describe('MDC-based MatSelectionList without forms', () => {
expect(listOptions.every(option => option.componentInstance.selected)).toBe(false);
});

// This is temporarily disabled as the MDC list does not emit a proper event when
// items are interactively toggled with e.g. `CTRL + A`.
// TODO(devversion): look more into this. MDC does not expose an `onChange` adapter
// function. Authors are required to emit a change event on checkbox/radio change, but
// that is not an viable option for us since we also allow for programmatic selection updates.
// https://github.com/material-components/material-components-web/blob/a986df922b6b4c1ef5c59925107281d1d40287a8/packages/mdc-list/component.ts#L300-L308.
// tslint:disable-next-line:ban
xit('should dispatch the selectionChange event when selecting via ctrl + a', () => {
it('should dispatch the selectionChange event when selecting via ctrl + a', () => {
const spy = spyOn(fixture.componentInstance, 'onSelectionChange');
listOptions.forEach(option => (option.componentInstance.disabled = false));
fixture.detectChanges();
Expand Down
4 changes: 2 additions & 2 deletions src/material-experimental/mdc-list/selection-list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -398,8 +398,8 @@ function getSelectionListAdapter(list: MatSelectionList): MDCListAdapter {

baseAdapter.setAttributeForElementIndex(index, attribute, value);
},
notifyAction(index: number): void {
list._emitChangeEvent([list._itemsArr[index]]);
notifySelectionChange(changedIndices: number[]): void {
list._emitChangeEvent(changedIndices.map(index => list._itemsArr[index]));
},
};
}

0 comments on commit 38affc3

Please sign in to comment.