Skip to content

fix(material/menu): missing panelClass getter #33191

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ok7sai merged 1 commit into from
May 3, 2026
Merged

fix(material/menu): missing panelClass getter #33191

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions goldens/material/menu/index.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ export class MatMenu implements AfterContentInit, MatMenuPanel<MatMenuItem>, OnI
overlapTrigger: boolean;
overlayPanelClass: string | string[];
_panelAnimationState: 'void' | 'enter';
get panelClass(): string;
set panelClass(classes: string);
// (undocumented)
readonly panelId: string;
Expand Down
9 changes: 9 additions & 0 deletions src/material/menu/menu.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -568,6 +568,15 @@ describe('MatMenu', () => {
expect(panel.classList).toContain('custom-two');
});

it('should expose the configured classes via the getter', () => {
const fixture = TestBed.createComponent(SimpleMenu);
fixture.componentInstance.panelClass = 'custom-one custom-two';
fixture.detectChanges();

expect(fixture.componentInstance.menu.panelClass).toBe('custom-one custom-two');
expect(fixture.componentInstance.menu.classList).toBe('custom-one custom-two');
});

it('should set the "menu" role on the overlay panel', () => {
const fixture = TestBed.createComponent(SimpleMenu);
fixture.detectChanges();
Expand Down
5 changes: 4 additions & 1 deletion src/material/menu/menu.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,6 +221,9 @@ export class MatMenu implements AfterContentInit, MatMenuPanel<MatMenuItem>, OnI
* @param classes list of class names
*/
@Input('class')
get panelClass(): string {
Copy link
Copy Markdown
Member

@crisbeto crisbeto May 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there context behind this change? I don't feel strongly against it, it's just been like that for a long time and it never came up.

Copy link
Copy Markdown
Member Author

@ok7sai ok7sai May 3, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's an internal design system tries to override the menu style with a directive that does something like

this.matMenu.panelClass = `${this.matMenu.panelClass} new-theme`;

Which is not working currently because without a getter this.matMenu.panelClass always return undefined.

The above code exists today while it doesn't work. It's not raised up probably because 1) the directive is newly added and 2) there's no panelClass usage along with the directive yet... until now that I am using it.

return this._previousPanelClass;
}
set panelClass(classes: string) {
const previousPanelClass = this._previousPanelClass;
const newClassList = {...this._classList};
Expand All @@ -243,7 +246,7 @@ export class MatMenu implements AfterContentInit, MatMenuPanel<MatMenuItem>, OnI

this._classList = newClassList;
}
private _previousPanelClass!: string;
private _previousPanelClass: string = '';

/**
* This method takes classes set on the host mat-menu element and applies them on the
Expand Down
Loading