Commit 1418473

crisbetoVivian Hu

authored and

Vivian Hu

committed

fix(list): deselect option if value doesn't match up (#14800)

Along the same lines as #14734. Deselects a selected list option, if its value is changed to something that doesn't match up with the group.

1 parent 9411827 commit 1418473Copy full SHA for 1418473

File tree

+25

-1

lines changed

+25

-1

lines changed

Lines changed: 15 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -982,6 +982,21 @@ describe('MatSelectionList with forms', () => {`
`982`	`982`	`.toBe(true, 'Expected every list option to be unselected.');`
`983`	`983`	`});`
`984`	`984`
	`985`	`+ it('should deselect option whose value no longer matches', () => {`
	`986`	`+ const option = listOptions[1];`
	`987`	`+`
	`988`	`+ fixture.componentInstance.formControl.setValue(['opt2']);`
	`989`	`+ fixture.detectChanges();`
	`990`	`+`
	`991`	`+ expect(option.selected).toBe(true, 'Expected option to be selected.');`
	`992`	`+`
	`993`	`+ option.value = 'something-different';`
	`994`	`+ fixture.detectChanges();`
	`995`	`+`
	`996`	`+ expect(option.selected).toBe(false, 'Expected option not to be selected.');`
	`997`	`+ expect(fixture.componentInstance.formControl.value).toEqual([]);`
	`998`	`+ });`
	`999`	`+`
`985`	`1000`	`it('should mark options as selected when the value is set before they are initialized', () => {`
`986`	`1001`	`fixture.destroy();`
`987`	`1002`	`fixture = TestBed.createComponent(SelectionListWithFormControl);`

Lines changed: 10 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -120,7 +120,16 @@ export class MatListOption extends _MatListOptionMixinBase`
`120`	`120`	`@Input() checkboxPosition: 'before' \| 'after' = 'after';`
`121`	`121`
`122`	`122`	`/** Value of the option */`
`123`		`- @Input() value: any;`
	`123`	`+ @Input()`
	`124`	`+ get value(): any { return this._value; }`
	`125`	`+ set value(newValue: any) {`
	`126`	`+ if (this.selected && newValue !== this.value) {`
	`127`	`+ this.selected = false;`
	`128`	`+ }`
	`129`	`+`
	`130`	`+ this._value = newValue;`
	`131`	`+ }`
	`132`	`+ private _value: any;`
`124`	`133`
`125`	`134`	`/** Whether the option is disabled. */`
`126`	`135`	`@Input()`

Comments

(0)