Kendo UI Popups Not Visible Inside Angular Material Dialog After Upgrading to Angular 21
Environment
| Product | Progress® Kendo UI® for Angular |
| Angular version | 21+ |
Description
After upgrading to Angular 21, Kendo UI components that open popups no longer show them inside an Angular Material Dialog (MatDialog). The issue affects dropdowns (MultiSelect, DropDownList, ComboBox, AutoComplete), date pickers (DatePicker, DateTimePicker, TimePicker), ColorPicker, SplitButton, DropDownButton, and custom popups created with PopupService. Keyboard navigation may still cycle through values, but the popup container is not visible. No console errors appear.
This knowledge base article also answers the following questions:
- Why do Kendo UI popups not open inside a Material Dialog after upgrading Angular?
- How do I fix Kendo component popups that are hidden behind a Material Dialog overlay?
- How do I use
appendToto keep Kendo popups visible inside a top-layer container?
Cause
Angular 21 changed the Angular CDK overlay mechanism to use the native browser Popover API. When MatDialog opens, its backdrop and panel are promoted to the browser's Top Layer — a separate rendering layer above all normal DOM content, regardless of z-index.
Because the Kendo Popup is appended to <body> by default, it remains in the normal DOM stacking context and renders behind the Top Layer dialog. No z-index value can fix this — the Top Layer is outside the regular stacking order.
Solution
You have two options depending on your project requirements.
Option 1 — Set appendTo: 'component' on the Affected Components
Most Kendo UI components that open a popup expose a popupSettings input with an appendTo property that accepts 'root' (default), 'component', or a ViewContainerRef.
Setting it to 'component' appends the popup as a child of the component element itself, which is already inside the dialog's DOM (and therefore inside the Top Layer).
<kendo-dropdownlist [data]="items" [popupSettings]="{ appendTo: 'component' }"></kendo-dropdownlist>For the DateRangePicker, set appendTo directly on the kendo-daterange-popup child element:
<kendo-daterangepicker>
<kendo-daterange-popup appendTo="component"></kendo-daterange-popup>
</kendo-daterangepicker>When using PopupService directly, pass a ViewContainerRef pointing to an element already inside the dialog:
@ViewChild('dialogBody', { read: ViewContainerRef }) dialogBody!: ViewContainerRef;
this.popupService.open({
content: MyPopupComponent,
appendTo: this.dialogBody
});Option 2 — Disable the Popover API Globally for Angular CDK
To restore the previous CDK overlay behavior for the entire application without modifying every component, disable the Popover API by providing OVERLAY_DEFAULT_CONFIG in your root module or app.config.ts:
import { OVERLAY_DEFAULT_CONFIG } from '@angular/cdk/overlay';
// app.config.ts (standalone bootstrap)
export const appConfig: ApplicationConfig = {
providers: [
{ provide: OVERLAY_DEFAULT_CONFIG, useValue: { usePopover: false } }
]
};
// Or in AppModule (NgModule bootstrap)
@NgModule({
providers: [
{ provide: OVERLAY_DEFAULT_CONFIG, useValue: { usePopover: false } }
]
})
export class AppModule {}Option 2 affects all CDK overlays in the application. To fix only specific components without changing the global CDK configuration, use Option 1.