DropDownTree filtering can cause error

1 Answer 552 Views

DropDownTree

Joel asked on 08 Apr 2022, 08:56 PM

I have encountered an error while using filtering with DropDownTree. I am currently using kendo-angular-dropdowns 5.5.1 in my project, but I have reproduced this error with 6.0.2. Here are the conditions:

Use kendoDropDownTreeFlatBinding with kendoDropDownTreeExpandable directive.
Setup value binding and initialize the value to a child entry in the list.
Run and attempt to filter the dropdown. Some searches will produce the error:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ng-untouched: true'. Current value: 'ng-untouched: false'.

I have reproduced the error at https://angular-e7ahkr.stackblitz.io:

Open the console while running the example.
Type "nan" in the dropdown search bar.
I'm not certain this matters, but notice that both Nancy Davlio and Steven Buchanan are found in the results, and that Steve has child nodes.
Now press "c" to make the filter "nanc" and the error will occur in the console. This will also cause focus to be removed from the search bar.

Is there anything I can do to work around this? Here is the code for app.component.ts in case the StackBlitz doesn't work:

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  styles: ['.furniture { width: 250px; }'],
  template: `
       <kendo-dropdowntree
           kendoDropDownTreeExpandable
           [kendoDropDownTreeFlatBinding]="data"
           parentIdField="reportsTo"
           valueField="id"
           textField="name"
           [(ngModel)]="person"
           class="furniture"
           [filterable]="true"
           [expandOnFilter]="{ expandMatches: true}"
        >
       </kendo-dropdowntree>
   `,
})
export class AppComponent {
  public data: any[] = [
    { id: 2, name: 'Andrew Fuller', reportsTo: null },
    { id: 1, name: 'Nancy Davolio', reportsTo: 2 },
    { id: 3, name: 'Janet Leverling', reportsTo: 2 },
    { id: 4, name: 'Margaret Peacock', reportsTo: 2 },
    { id: 5, name: 'Steven Buchanan', reportsTo: 2 },
    { id: 8, name: 'Laura Callahan', reportsTo: 2 },
    { id: 6, name: 'Michael Suyama', reportsTo: 5 },
    { id: 7, name: 'Robert King', reportsTo: 5 },
    { id: 9, name: 'Anne Dodsworth', reportsTo: 5 },
  ];
  public person = this.data[6];
}

DropDownTree filtering can cause error

1 Answer, 1 is accepted