diff --git a/projects/igniteui-angular/query-builder/src/query-builder/query-builder-tree.component.ts b/projects/igniteui-angular/query-builder/src/query-builder/query-builder-tree.component.ts index 729b6ce9bb9..4d720a69948 100644 --- a/projects/igniteui-angular/query-builder/src/query-builder/query-builder-tree.component.ts +++ b/projects/igniteui-angular/query-builder/src/query-builder/query-builder-tree.component.ts @@ -1719,7 +1719,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy { this.cancelOperandEdit(); // Ignore values of certain properties for the comparison - const propsToIgnore = ['parent', 'hovered', 'ignoreCase', 'inEditMode', 'inAddMode']; + const propsToIgnore = ['parent', 'hovered', 'ignoreCase', 'inEditMode', 'inAddMode', 'externalObject']; const propsReplacer = function replacer(key, value) { if (propsToIgnore.indexOf(key) >= 0) { return undefined; diff --git a/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts b/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts index 37e9aa1a898..1656f06b800 100644 --- a/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts +++ b/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts @@ -327,6 +327,21 @@ export class IgxQueryBuilderComponent implements OnDestroy { this.queryTree.setAddButtonFocus(); } + private stripExternalObject(tree: IExpressionTree): void { + for (const operand of tree?.filteringOperands ?? []) { + if ('operator' in operand) { + this.stripExternalObject(operand); + continue; + } + + delete (operand.condition as any)?.externalObject; + + if (operand.searchTree) { + this.stripExternalObject(operand.searchTree); + } + } + } + protected onExpressionTreeChange(tree: IExpressionTree) { if (tree && this.entities && tree !== this._expressionTree) { this._expressionTree = recreateTree(tree, this.entities); @@ -334,7 +349,8 @@ export class IgxQueryBuilderComponent implements OnDestroy { this._expressionTree = tree; } if (this._shouldEmitTreeChange) { - this.expressionTreeChange.emit(tree); + this.stripExternalObject(this._expressionTree); + this.expressionTreeChange.emit(this._expressionTree); } } @@ -389,4 +405,3 @@ export class IgxQueryBuilderComponent implements OnDestroy { }); } } - diff --git a/src/app/query-builder/query-builder.sample.ts b/src/app/query-builder/query-builder.sample.ts index ac89ac47cb6..38d7bf9694f 100644 --- a/src/app/query-builder/query-builder.sample.ts +++ b/src/app/query-builder/query-builder.sample.ts @@ -191,7 +191,15 @@ export class QueryBuilderComponent implements OnInit { // this.expressionTree = tree; // this.onChange(); } - return tree ? JSON.stringify(tree, null, 2) : 'Please add an expression!'; + return tree ? JSON.stringify(tree, this.serializeExpressionTreeCallback, 2) : 'Please add an expression!'; + } + + // JSON.stringify serializes Set as {}, so convert Set-based searchVal to array to preserve values in the printed output. + private serializeExpressionTreeCallback(key: string, val: any) { + if (key === 'searchVal' && val instanceof Set) { + return Array.from(val); + } + return val; } public canCommitExpressionTree() {