bug(mat-selection-list): Two mat-selection-lists with same formControl are not in sync

[hisham]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I have two mat-selection-lists, in two different tab groups, referencing the same formControl.

Updates to the formControl via setValue correctly updates both lists.

However, when I change the selection via one of the lists in the UI, the other list is not in sync, even though formControl underlying value does change.

Reproduction

See https://stackblitz.com/edit/angular-xptorw?file=src/app/app.component.html for reproduction.

They key code is as follows:

<mat-selection-list [formControl]="myFormControl">
  <mat-list-option value="1">Hello 1</mat-list-option>
  <mat-list-option value="2">Hello 2</mat-list-option>
</mat-selection-list>

<mat-selection-list [formControl]="myFormControl">
  <mat-list-option value="1">Hello 1</mat-list-option>
  <mat-list-option value="2">Hello 2</mat-list-option>
</mat-selection-list>

Expected Behavior

The two lists should be in sync as long as they are referencing the same value control.

If I subscribe to the selectionChange event in each list and implement the following workaround, they become in sync:

  public onSelectionChange($event: any) {
    this.myFormControl.setValue(this.myFormControl.value);
  }

Actual Behavior

The two lists are not in sync.

Environment

• Angular: 12.1.1
• CDK/Material: 12.1.1
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[crisbeto]

This looks like an issue with the forms module since the same behavior can be observed with a plain input https://stackblitz.com/edit/angular-3di3w3?file=src%2Fapp%2Fapp.component.html. Transferring the issue to the FW repo to check if it's the expected behavior.

[shashanksingh91]

Problem Understanding

I think it is because the in the FormControlDirective - form_control_directive.ts on any change in the field when it updates the value via updateValueAndValidity it is passing emitEvent: False.

Let me know if it helps