Skip to content

bug(Overlay): how can i set default panelClass to cdkConnectedOverlay #32419

@xujing0521

Description

@xujing0521

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

19.x

Description

v19

In Angular CDK v19, I rewrote the overlay behavior to automatically apply different built-in panelClass values depending on the context. This allowed my custom default panelClass to coexist with user-provided panelClass values without being overridden.

@Injectable()
export class TestOverlay extends Overlay {
    private getOverlayPanelClasses(config: OverlayConfig) {
        let classes = ['test']; //'test' is  only for examples
        if (config.panelClass) {
            if (Array.isArray(config.panelClass)) {
                classes = classes.concat(config.panelClass);
            } else {
                classes.push(config.panelClass as string);
            }
        }
        return classes;
    }

    create(config?: OverlayConfig): OverlayRef {
        const overlayConfig: OverlayConfig = {
            ...config,
            panelClass: this.getOverlayPanelClasses(config)
        };
        return super.create(overlayConfig);
    }
}

v21

After upgrading to Angular CDK v21 and switching to injection via the CDK_CONNECTED_OVERLAY_DEFAULT_CONFIG token, I found that whenever a component provides cdkConnectedOverlayPanelClass , the default panelClass I set through the default config gets completely overridden.

{
          provide: CDK_CONNECTED_OVERLAY_DEFAULT_CONFIG,
          useFactory: () => {
              return {
                  panelClass: 'test',
              };
          }
} 

There are many places in my project where cdkConnectedOverlayPanelClass is used. What should I change now?

Reproduction

StackBlitz link:
Steps to reproduce:
1.
2.

Expected Behavior

Provide a way to set a default class for panelClass.

Actual Behavior

Setting CDK_CONNECTED_OVERLAY_DEFAULT_CONFIG is completely overridden by the custom input.

Environment

  • Angular: 21
  • CDK/Material: 21
  • Browser(s): any
  • Operating System (e.g. Windows, macOS, Ubuntu):

Metadata

Metadata

Assignees

No one assigned

    Labels

    P4A relatively minor issue that is not relevant to core functionsarea: cdk/overlay

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions