Skip to content

fix(elements): strip Blazor externalObject from expression tree events - 21.2.x #17252

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
IMinchev64 wants to merge 1 commit into
base: 21.2.x
Choose a base branch
from
+24 −4
Open

fix(elements): strip Blazor externalObject from expression tree events - 21.2.x #17252

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 23 additions & 3 deletions projects/igniteui-angular-elements/src/app/custom-strategy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { NgElement, NgElementStrategyEvent } from '@angular/elements';
import { fromEvent, Observable } from 'rxjs';
import { map, takeUntil } from 'rxjs/operators';
import { ComponentConfig, ContentQueryMeta } from './component-config';
import { IExpressionTree, IFilteringExpression } from 'igniteui-angular/core';

import { ComponentNgElementStrategy, ComponentNgElementStrategyFactory, extractProjectableNodes } from './ng-element-strategy';
import { TemplateWrapperComponent } from './wrapper/wrapper.component';
Expand Down Expand Up @@ -465,11 +466,30 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
}

protected patchOutputComponents(eventName: string, eventArgs: any) {
// Single out only `columnInit` event for now. If more events pop up will require a config generation.
if (eventName !== "columnInit") {
if (eventName === 'filteringExpressionsTreeChange' || eventName === 'expressionTreeChange' || eventName === 'advancedFilteringExpressionsTreeChange') {
this.stripExternalObject(eventArgs);
return eventArgs;
}
Comment thread
IMinchev64 marked this conversation as resolved.
return this.createProxyForComponentValue(eventArgs, 1).value;
// Single out only `columnInit` event for now. If more events pop up will require a config generation.
if (eventName === "columnInit") {
return this.createProxyForComponentValue(eventArgs, 1).value;
}
return eventArgs;
}

protected 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 as IFilteringExpression).searchTree) {
this.stripExternalObject(operand.searchTree);
}
}
Comment on lines +481 to +492
Copy link

Copilot AI Apr 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

stripExternalObject currently only deletes externalObject from operand.condition. The Blazor workaround elsewhere in the repo treats externalObject as a generic non-serializable key (e.g. JSON stringify replacers), so this may leave externalObject on other nodes (tree/operands/searchTree) and still break event serialization. Consider stripping externalObject from every visited object in the expression tree (including tree nodes and expressions), ideally using a visited set to avoid potential cycles from wrapper-injected references.

Suggested change
for (const operand of tree?.filteringOperands ?? []) {
if ('operator' in operand) {
this.stripExternalObject(operand);
continue;
}
delete (operand.condition as any)?.externalObject;
if ((operand as IFilteringExpression).searchTree) {
this.stripExternalObject(operand.searchTree);
}
}
this.stripExternalObjectFromNode(tree, new WeakSet<object>());
}
protected stripExternalObjectFromNode(value: unknown, visited: WeakSet<object>): void {
if (!value || typeof value !== 'object') {
return;
}
if (visited.has(value)) {
return;
}
visited.add(value);
delete (value as { externalObject?: unknown }).externalObject;
if (Array.isArray(value)) {
for (const item of value) {
this.stripExternalObjectFromNode(item, visited);
}
return;
}
for (const nestedValue of Object.values(value)) {
this.stripExternalObjectFromNode(nestedValue, visited);
}

Copilot uses AI. Check for mistakes.
}

/**
Expand Down
2 changes: 1 addition & 1 deletion projects/igniteui-angular/query-builder/src/query-builder/query-builder-tree.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1671,7 +1671,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;
Expand Down
Loading