Components: bug(MdListOption/MdSelectionList) `selectChange` does not fire on MdListOption

Created on 4 Oct 2017  路  3Comments  路  Source: angular/components

Bug, feature request, or proposal:

The selectChange output on md-list-option does not work (never called) when selecting options.

What is the expected behavior?

When clicking on an md-list-option, selectChange is called.

What is the current behavior?

When clicking on an md-list-option, selectChange is not called.

What are the steps to reproduce?

Here is a Plunker showing this (minimal changes from the Angular Material docs example): https://plnkr.co/edit/YPB47YfYjriGM7FA4lnX?p=preview

Here are the relevant sections:

-- File: list-selection-example.html
<md-selection-list #shoes>
  <md-list-option *ngFor="let shoe of typesOfShoes" (selectChange)="change($event)">
    {{shoe}}
  </md-list-option>
</md-selection-list>

<p>
  Options selected: {{shoes.selectedOptions.selected.length}}
</p>
-- File: list-selection-example.ts
@Component({
  selector: 'list-selection-example',
  styleUrls: ['list-selection-example.css'],
  templateUrl: 'list-selection-example.html',
})
export class ListSelectionExample {
  typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];

  public change() {
    console.log('This should fire on select change')
  }
}



md5-7d28f2a0eb2c6bc87d1fe520dbae4069



<md-selection-list *ngIf="day && day.shifts" #selectionList>
  <md-list-option
    *ngFor="let shift of sort(day.shifts)"
    [value]="shift"
    (selectChange)="selectChange(selectionList.selectedOptions)"
  >
</md-selection-list>

Most helpful comment

As for the problem I was trying to solve, I solved it more elegantly using the following (which works):

  ngOnInit() {
    this.selectionList.selectedOptions.onChange.subscribe(list => {
      this.selectedShiftsUpdated.emit(this.selectionList.selectedOptions.selected.map(option => option.value));
    });
  }

This bug remains though.

All 3 comments

As for the problem I was trying to solve, I solved it more elegantly using the following (which works):

  ngOnInit() {
    this.selectionList.selectedOptions.onChange.subscribe(list => {
      this.selectedShiftsUpdated.emit(this.selectionList.selectedOptions.selected.map(option => option.value));
    });
  }

This bug remains though.

This is actually a duplicate and will be fixed by #6901

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

MurhafSousli picture MurhafSousli  路  3Comments

constantinlucian picture constantinlucian  路  3Comments

LoganDupont picture LoganDupont  路  3Comments

kara picture kara  路  3Comments

vitaly-t picture vitaly-t  路  3Comments