From 38affc3d43f75e2608ee1530e6cd360b8b42073a Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Mon, 10 Jan 2022 18:22:26 +0100 Subject: [PATCH] fix(material-experimental/mdc-list): ensure selection change event fires 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). --- .../mdc-list/selection-list.spec.ts | 9 +-------- src/material-experimental/mdc-list/selection-list.ts | 4 ++-- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/src/material-experimental/mdc-list/selection-list.spec.ts b/src/material-experimental/mdc-list/selection-list.spec.ts index 9ee28517e1ed..66c82416d2c6 100644 --- a/src/material-experimental/mdc-list/selection-list.spec.ts +++ b/src/material-experimental/mdc-list/selection-list.spec.ts @@ -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(); diff --git a/src/material-experimental/mdc-list/selection-list.ts b/src/material-experimental/mdc-list/selection-list.ts index 01af62d55921..a1019934831c 100644 --- a/src/material-experimental/mdc-list/selection-list.ts +++ b/src/material-experimental/mdc-list/selection-list.ts @@ -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])); }, }; }