components icon indicating copy to clipboard operation
components copied to clipboard

fix(select): value update not being propagated when selected option is removed or added

Open crisbeto opened this issue 6 years ago • 5 comments

Fixes the select not propagating its value back up to the value accessor if a selected option is added or removed. Previously this only happened the next time the user interacted with an option.

Fixes #9038.

crisbeto avatar Dec 22 '17 17:12 crisbeto

@crisbeto it looks like this has the side-effect of causing the select to emit a selectionChange event for its initial value, which it didn't do before

(was caught by an internal test)

jelbourn avatar Jan 26 '18 21:01 jelbourn

@jelbourn do you have any more info on the test? I wasn't able to reproduce it in a test or in the demo app in a few scenarios (single selection, multiple selection and without Angular forms). Here's what my test looks like:

it('should not emit the `selectionChange` event for the preselected value', fakeAsync(() => {
  const fixture = TestBed.createComponent(BasicSelectWithoutFormsPreselected);

  fixture.detectChanges();
  flush();

  expect(fixture.componentInstance.selectionChangeSpy).not.toHaveBeenCalled();
}));

@Component({
  template: `
    <mat-form-field>
      <mat-select placeholder="Food" [(value)]="selectedFood"
        (selectionChange)="selectionChangeSpy()">
        <mat-option *ngFor="let food of foods" [value]="food.value">
          {{ food.viewValue }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  `
})
class BasicSelectWithoutFormsPreselected {
  selectedFood = 'pizza-1';
  selectionChangeSpy = jasmine.createSpy('selectionChange spy');
  foods: any[] = [
    { value: 'steak-0', viewValue: 'Steak' },
    { value: 'pizza-1', viewValue: 'Pizza' },
  ];

  @ViewChild(MatSelect) select: MatSelect;
}

crisbeto avatar Jan 27 '18 10:01 crisbeto

In the test that was failing for this, it was a select inside of mat-paginator. The thing under test is listening to page events from the paginator, the first thing the test does is to set the paginator.pageSize = 1, then they manually emit page (for some reason), and then expect that only one event was handled, but two occur. The extra event seems to come from the select emitting something that it wasn't before.

jelbourn avatar Jan 30 '18 23:01 jelbourn

Any news on this?

SamuelMarks avatar Apr 19 '18 15:04 SamuelMarks

any updates here?

mhmo91 avatar Oct 21 '19 10:10 mhmo91