mat-select Maximum call stack size exceeded in select with 800+ options

user_9606208 0
Viewed 784

I am using mat-select to populate an array of objects in the dropdown. there is an option to select and deselect all the values by clicking on ALL. For that, I am emptying the form control assocaiated with it and for selecting all, populating the form control with all the ids. For Small Data , its working fine..For data more than 800, when i am emptying the formcontrol on unselect of al, It throws an error(Maximum call stack size exceeded at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:200) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:130) )

component.html

 <mat-select [formControl]="courseFormControl" multiple aria-label="Course Name"
          [(ngModel)]="selectedCourseIds">
<mat-option *ngFor="let course of courseList"
           (onSelectionChange)="onCourseSelect($event,courseFormControl)">
            {{course.courseName}}
          </mat-option>
</mat-select>

component.ts

 onCourseSelect(event, form) {
    if(event.isUserInput) {
  let listCourseId =  [];
//data contains the total list
              data.map((val,ind) => {
                if(val.selected === true){
                  listCourseId.push(val.courseId)
                }
              });
          this.selectedCourseIds = listCourseId;

          this.courseFormControl.setValue(listCourseId);
}

Error is being thrown , on deselcting all

core.js:15724 ERROR RangeError: Maximum call stack size exceeded at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:200) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:130) at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:76) at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53) at EventEmitter.push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next (Subject.js:47) at EventEmitter.push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit (core.js:13499) at MatOption.push../node_modules/@angular/material/esm5/core.es5.js.MatOption._emitSelectionChangeEvent (core.es5.js:2803) at MatOption.push../node_modules/@angular/material/esm5/core.es5.js.MatOption.deselect (core.es5.js:2595)

angular-material
1 Answers

Issue is when we directly assign values to the mat-select component. So instead of pushing value directly into the formControl, use the mat-select apis to deselect the option.

Try the following:

component.html

<mat-select [formControl]="courseFormControl" multiple aria-label="Course Name" [(ngModel)]="selectedCourseIds" #matSelect>
  <mat-option *ngFor="let course of courseList" (onSelectionChange)="onCourseSelect($event, courseFormControl)">
    {{ course.courseName }}
  </mat-option>
</mat-select>

component.ts

@ViewChild('matSelect') matSelect;

deSelectAll(){
  this.matSelect.options.forEach((x) => {
      x.deselect();
  });
}
user_78432240
Related