angular / angular/components

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

Open
#32,419 2 comments 0 reactions 0 assignees View on GitHub
area: cdk/overlay P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### 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):

Contributor guide

Open the contributing guide

Research direction

Start by tracing how CDK_CONNECTED_OVERLAY_DEFAULT_CONFIG and the cdkConnectedOverlayPanelClass input are combined in the connected overlay implementation. Compare the v19 custom Overlay.create behavior with the v21 default-config path, then identify a reproducible test case showing whether the default and input panel classes should be merged.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.