components icon indicating copy to clipboard operation
components copied to clipboard

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

Open xujing0521 opened this issue 3 weeks ago • 2 comments

Is this a regression?

  • [x] 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):

xujing0521 avatar Nov 27 '25 02:11 xujing0521

The CDK_CONNECTED_OVERLAY_DEFAULT_CONFIG applies only to usages of the CdkConnectedOverlay directive whereas your initial approach was applying to all directives. Your previous approach should still work.

crisbeto avatar Nov 27 '25 10:11 crisbeto

The CDK_CONNECTED_OVERLAY_DEFAULT_CONFIG applies only to usages of the CdkConnectedOverlay directive whereas your initial approach was applying to all directives. Your previous approach should still work.

I tried, but it doesn't work for CdkConnectedOverlay. I noticed that is the current CdkConnectedOverlay no longer based on the Overlay service for creation?

xujing0521 avatar Nov 28 '25 02:11 xujing0521