Permission tree search bar is broken (Angular 21 / PrimeNG 21) #12660

Prerequisites

What is your product version? v15.x (latest) What is your product type (Angular or MVC)? Angular What is product framework type (.net framework or .net core)? .NET 10.0 ABP Framework version: 11.1.0 Abp.AspNetZeroCore version: 5.1.0 Angular version: 21.2.0 PrimeNG version: 21.1.2 Which theme are you using? Default (Metronic) Theme settings: Default settings, no custom changes

Explanation of the error

The search bar inside the Permission Tree component (permission-tree.component.ts under app/admin/shared/) does not filter the tree. Typing any text in the search input produces no visible effect — the full tree continues to be displayed, with all branches and children visible at the first level.

Steps to reproduce:

1. Log in as host admin (or any user with Pages.Administration.Roles permission).
2. Open Administration → Roles.
3. Click Create new role (or edit an existing one).
4. Switch to the Permissions tab.
5. Type any text in the search input at the top of the permission tree (e.g. "Language", "Idioma", "Users", "Tenant").

Expected behavior: the tree should narrow down to show only the matching permission(s) and the ancestor chain that leads to them.

Actual behavior: the tree remains unfiltered. All nodes continue to be displayed; no nodes are hidden or removed.

The same issue also occurs in:

• Administration → Users → Edit user permissions (same <permission-tree> component).
• The permission filter modal (permission-tree-modal.component).

Root cause analysis (so far): The existing implementation relies on mutating node.styleClass = 'hidden-tree-node' on existing TreeNode references after typing in the search input. However, PrimeNG 21 <p-tree> uses ChangeDetectionStrategy.OnPush, so mutating a property on an unchanged node reference does not trigger re-rendering — the [class]="cn(cx('node'), node.styleClass)" host binding inside UITreeNode is never re-evaluated, and the hidden-tree-node CSS class is never applied to the DOM.

I attempted several workarounds, including:

1. Rebuilding the entire tree with new node references on each keystroke (so [value] input ref changes and PrimeNG re-renders).
2. Using PrimeNG's [filteredNodes] input directly (the same input the built-in filter populates internally).
3. Replacing the ngModel binding with a native (input) event handler in case Angular Forms was swallowing ngModelChange events.

None of these fixed the behavior in the final UI, even though the build is clean and no errors are thrown in the browser console.

I also reproduced the same broken behavior in the public ASP.NET Zero Angular live demo (latest version) — the search box in the role permission tree does nothing.

Could you please verify the permission tree search functionality in the latest template, and either fix it or provide guidance on the supported approach for filtering the PrimeNG 21 tree under OnPush change detection?

Thank you.