angular / angular/components

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

Ouverte
#32,419 2 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
area: cdk/overlay P4
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
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):

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par retracer comment CDK_CONNECTED_OVERLAY_DEFAULT_CONFIG et l’input cdkConnectedOverlayPanelClass sont combinés dans l’implémentation de l’overlay connecté. Comparez le comportement personnalisé de Overlay.create dans v19 avec le chemin de configuration par défaut de v21, puis identifiez un cas de test reproductible montrant si les classes de panneau par défaut et de l’input doivent être fusionnées.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
À clarifier
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.