Skip to content

mat-list-option: selected/value input assignment depends on property binding order #17500

Closed
hrueger/AGLight
#112
@atscott

Description

@atscott

The following test will fail in Ivy because selected is assigned first and then value is assigned which sets selected back to false here. This is because in Ivy, property bindings are set based on the order they appear in the template, not the order they are declared in the component.

  const itemValue = 'item1';
  @Component({
      template: `
         <mat-selection-list>
             <mat-list-option [selected]="true" [value]="'${itemValue}'">Item</mat-list-option>
         </mat-selection-list>`
  })
  class SelectionList {}

  const fixture = TestBed.configureTestingModule({declarations: [SelectionList]}).createComponent(SelectionList);
  fixture.detectChanges();
  const listItemEl = fixture.debugElement.query(By.directive(MatListOption))!;
  expect(listItemEl.componentInstance.selected).toBe(true);
  expect(listItemEl.componentInstance.value).toBe(itemValue);

I'm not sure how frequently this occurs in this repo, but other components should probably be audited for similar errors if they haven't already.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions