Skip to content

fix(material-experimental): menu item should not inherit parent classname #17953

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
merged 1 commit into from
Dec 12, 2019
Merged

fix(material-experimental): menu item should not inherit parent classname #17953

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
3 changes: 3 additions & 0 deletions src/material-experimental/mdc-menu/menu-item.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ import {MatMenuItem as BaseMatMenuItem} from '@angular/material/menu';
inputs: ['disabled', 'disableRipple'],
host: {
'[attr.role]': 'role',
// The MatMenuItem parent class adds `mat-menu-item` to the CSS classlist, but this should
// not be added for this MDC equivalent menu item.
'[class.mat-menu-item]': 'false',
Copy link
Member

@crisbeto crisbeto Dec 12, 2019

Choose a reason for hiding this comment

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

AFAIK Ivy and ViewEngine have different behavior when it comes to resolving conflicting class bindings so I'm not sure how this will behave. Maybe we should just set the class manually in the constructor?

Copy link
Contributor Author

@andrewseguin andrewseguin Dec 12, 2019

Choose a reason for hiding this comment

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

I think there's a few approaches to doing this but none seem to be the ideal one. I don't particularly have a strong preference over any certain solution, and Jeremy and I just happened to land on this as the simplest. Based on what I see when running the devapp, this works fine

Copy link
Member

@crisbeto crisbeto Dec 12, 2019

Choose a reason for hiding this comment

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

The dev app runs in Ivy, it's ViewEngine that's inconsistent with how it handles conflicting bindings.

Copy link
Contributor Author

@andrewseguin andrewseguin Dec 12, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

You probably know more than I do with these conflicts, but I don't believe host bindings in the component metadata pass down at all to subclassed components. Do you know how to run the devapp in VE so I can test it out and confirm

Copy link
Member

@crisbeto crisbeto Dec 12, 2019

Choose a reason for hiding this comment

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

Hmm, good point that inheriting host didn't work on VE. In that case it should be fine. I don't know how we can run the dev app in VE.

'class': 'mat-mdc-menu-item',
'[class.mat-mdc-menu-item-highlighted]': '_highlighted',
'[class.mat-mdc-menu-item-submenu-trigger]': '_triggersSubmenu',
Expand Down
2 changes: 1 addition & 1 deletion src/material/menu/menu-item.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const _MatMenuItemMixinBase: CanDisableRippleCtor & CanDisableCtor & typeof MatM
inputs: ['disabled', 'disableRipple'],
host: {
'[attr.role]': 'role',
'class': 'mat-menu-item',
'[class.mat-menu-item]': 'true',
'[class.mat-menu-item-highlighted]': '_highlighted',
'[class.mat-menu-item-submenu-trigger]': '_triggersSubmenu',
'[attr.tabindex]': '_getTabIndex()',
Expand Down