fix(query-builder): prevent changing fields collection

Author: teodosiah

projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.ts

@@ -176,13 +176,8 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
         if (!this._fields && this.isAdvancedFiltering()) {
             this._fields = this.entities[0].fields;
         }
-
-        if (this._fields) {
-            this._fields.forEach(field => {
-                this.setFilters(field);
-                this.setFormat(field);
-            });
-        }
+        
+        this._fields = this._fields.map(f => ({...f, filters: this.getFilters(f), pipeArgs: this.getPipeArgs(f) }));
     }
 
     /**
@@ -1182,7 +1177,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
         if (!this.selectedField) {
             this.fieldSelect.input.nativeElement.focus();
         } else if (this.selectedField.filters.condition(this.selectedCondition)?.isUnary) {
-            this.conditionSelect.input.nativeElement.focus();
+            this.conditionSelect?.input.nativeElement.focus();
         } else {
             const input = this.searchValueInput?.nativeElement || this.picker?.getEditElement();
             input?.focus();
@@ -1485,16 +1480,19 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
         return ctx;
     }
 
-    private setFormat(field: FieldType) {
-        if (!field.pipeArgs) {
-            field.pipeArgs = { digitsInfo: DEFAULT_PIPE_DIGITS_INFO };
+    private getPipeArgs(field: FieldType) {
+        let pipeArgs = {...field.pipeArgs};
+        if (!pipeArgs) {
+            pipeArgs = { digitsInfo: DEFAULT_PIPE_DIGITS_INFO };
         }
 
-        if (!field.pipeArgs.format) {
-            field.pipeArgs.format = field.dataType === DataType.Time ?
+        if (!pipeArgs.format) {
+            pipeArgs.format = field.dataType === DataType.Time ?
                 DEFAULT_PIPE_TIME_FORMAT : field.dataType === DataType.DateTime ?
                     DEFAULT_PIPE_DATE_TIME_FORMAT : DEFAULT_PIPE_DATE_FORMAT;
         }
+        
+        return pipeArgs;
     }
 
     private selectDefaultCondition() {
@@ -1503,30 +1501,24 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
         }
     }
 
-    private setFilters(field: FieldType) {
+    private getFilters(field: FieldType) {
         if (!field.filters) {
             switch (field.dataType) {
                 case DataType.Boolean:
-                    field.filters = IgxBooleanFilteringOperand.instance();
-                    break;
+                    return IgxBooleanFilteringOperand.instance();
                 case DataType.Number:
                 case DataType.Currency:
                 case DataType.Percent:
-                    field.filters = IgxNumberFilteringOperand.instance();
-                    break;
+                    return IgxNumberFilteringOperand.instance();
                 case DataType.Date:
-                    field.filters = IgxDateFilteringOperand.instance();
-                    break;
+                    return IgxDateFilteringOperand.instance();
                 case DataType.Time:
-                    field.filters = IgxTimeFilteringOperand.instance();
-                    break;
+                    return IgxTimeFilteringOperand.instance();
                 case DataType.DateTime:
-                    field.filters = IgxDateTimeFilteringOperand.instance();
-                    break;
+                    return IgxDateTimeFilteringOperand.instance();
                 case DataType.String:
                 default:
-                    field.filters = IgxStringFilteringOperand.instance();
-                    break;
+                    return IgxStringFilteringOperand.instance();
             }
         }
     }

projects/igniteui-angular/src/lib/query-builder/query-builder.component.spec.ts

@@ -3317,8 +3317,7 @@ export class IgxQueryBuilderSampleTestComponent implements OnInit {
                 <p class="selectedField">{{selectedField.field}}</p>
                 <p class="selectedCondition">{{selectedCondition}}</p>
             } @else if (selectedField?.field === 'OrderId' && selectedCondition === 'equals') {
-                <igx-combo [data]="comboData" [(ngModel)]="searchValue.value"
-                    (selectionChanging)="handleChange($event, selectedField, searchValue)" [displayKey]="'field'">
+                <igx-combo [data]="comboData" [(ngModel)]="searchValue.value" [displayKey]="'field'">
                 </igx-combo>
             } @else {
                 <ng-container #defaultTemplate *ngTemplateOutlet="defaultSearchValueTemplate"></ng-container>
@@ -3347,6 +3346,7 @@ export class IgxQueryBuilderCustomTemplateSampleTestComponent implements OnInit
 
   public ngOnInit(): void {
     this.entities = SampleEntities.map(a => ({ ...a }));
+    this.entities[1].fields[0].formatter = (value: any, rowData: any) => rowData === 'equals' ? (Array.from(value)[0] as any).id : value;
 
     const tree = new FilteringExpressionsTree(FilteringLogic.And, null, 'Orders', ['*']);
     tree.filteringOperands.push({
@@ -3364,11 +3364,4 @@ export class IgxQueryBuilderCustomTemplateSampleTestComponent implements OnInit
       { id: 1, field: 'B' }
     ];
   }
-
-  public handleChange(ev, selectedField, searchVal) {
-    if (selectedField.field === 'OrderId') {
-      searchVal.value = ev.newValue[0];
-      selectedField.formatter = (value: any, rowData: any) => rowData === 'equals' ? (Array.from(value)[0] as any).id : value;
-    }
-  }
 }