DropDownButton/SplitButton throw an ExpressionChange error when opening Dialog using routing

[mbechev]

Describe the bug DropDownButton and SplitButton components throw ExpressionChange error when opening a Dialog which is defined in a parent component that has defined <router-outlet>.

app.component.ts The order of the <router-outlet> and kendoDialogContainer seems important, as swapping them fixes the issue.

@Component({
  selector: "app-root",
  template: `
          <router-outlet></router-outlet>
	  <div kendoDialogContainer></div>
	`,
})
export class AppComponent {}

nested.component.ts

@Component({
  selector: "app-nested",
  template: `
    <kendo-dropdownbutton [data]="data"> User Settings </kendo-dropdownbutton>
  `,
})
export class NestedComponent {
  public data = [
    {
      text: "My Profile",
      click: () => this.open(),
    },
  ];
  constructor(private dialogService: DialogService) {}
  open(): void {
    this.dialogService.open({
      title: "My Dialog",
      content: `Dialog Content`,
    });
  }
}

To Reproduce dropdownbtn-issue.zip

1. Download and unzip the file.
2. Run npm install.
3. Execute ng serve.
4. Click the DropDownButton and select the first option to open the Dialog.

Defining the kendoDialogContainer in the nested-component.ts file also fixes the issue.

[michaelmarcuccio]

It also occurs in other scenarios with inline <kendo-dialog> being toggled. I am having a very hard time reproducing this specifically, but it occurs in an app I cannot share. Just letting you know it is not isolated to just the dialogService/router-outlet causing trouble.

[michaelmarcuccio]

I created a workaround for this by blurring the dropdownbutton on click:

import { Directive } from '@angular/core';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { DropDownButtonComponent } from '@progress/kendo-angular-buttons';

@UntilDestroy()
@Directive({ selector: '[ddbFix]' })
export class KendoDDBUnfocusFixDirective {
  constructor(host: DropDownButtonComponent) {
    host.itemClick.pipe(untilDestroyed(this)).subscribe(() => {
      host.blur();
    });
  }
}

[yanmariomenev]

The error is also present in latest version of the component when using the SplitterButton buttonClick even to open the Dialog component: https://stackblitz.com/edit/angular-earrmn?file=src%2Fapp%2Fapp.component.ts

[Raisolution]

Fixed in the latest develop version v16.2.0-develop.1