Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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/cdk/menu/index.api.md
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,7 @@ export class CdkMenuItem implements FocusableOption, FocusableElement, Toggler,
getLabel(): string;
getMenu(): Menu | undefined;
getMenuTrigger(): CdkMenuTrigger | null;
protected _handleClick(event: MouseEvent): void;
get hasMenu(): boolean;
isMenuOpen(): boolean;
// (undocumented)
Expand Down
6 changes: 5 additions & 1 deletion src/cdk/menu/menu-base.ts
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,11 @@ export abstract class CdkMenuBase

/** Setup the FocusKeyManager with the correct orientation for the menu. */
private _setKeyManager() {
this.keyManager = new FocusKeyManager(this.items).withWrap().withTypeAhead().withHomeAndEnd();
this.keyManager = new FocusKeyManager(this.items)
.withWrap()
.withTypeAhead()
.withHomeAndEnd()
.skipPredicate(() => false);

if (this.orientation === 'horizontal') {
this.keyManager.withHorizontalOrientation(this.dir?.value || 'ltr');
Expand Down
29 changes: 28 additions & 1 deletion src/cdk/menu/menu-item.spec.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {Component, Type} from '@angular/core';
import {ComponentFixture, TestBed} from '@angular/core/testing';
import {dispatchKeyboardEvent} from '../testing/private';
import {dispatchFakeEvent, dispatchKeyboardEvent} from '../testing/private';
import {By} from '@angular/platform-browser';
import {ENTER} from '../keycodes';
import {CdkMenuModule} from './menu-module';
Expand Down Expand Up @@ -44,6 +44,33 @@ describe('MenuItem', () => {
expect(nativeButton.hasAttribute('aria-disabled')).toBeFalse();
});

it('should toggle a class when the item is disabled', () => {
expect(nativeButton.classList).not.toContain('cdk-menu-item-disabled');

menuItem.disabled = true;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

expect(nativeButton.classList).toContain('cdk-menu-item-disabled');

menuItem.disabled = false;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

expect(nativeButton.classList).not.toContain('cdk-menu-item-disabled');
});

it('should prevent the default click action when clicking on a disabled button', () => {
menuItem.disabled = true;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

const event = dispatchFakeEvent(nativeButton, 'click');
fixture.detectChanges();

expect(event.defaultPrevented).toBe(true);
});

it('should not have a menu', () => {
expect(menuItem.hasMenu).toBeFalse();
});
Expand Down
13 changes: 12 additions & 1 deletion src/cdk/menu/menu-item.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,12 @@ import {eventDispatchesNativeClick} from './event-detection';
host: {
'role': 'menuitem',
'class': 'cdk-menu-item',
'[class.cdk-menu-item-disabled]': 'disabled',
'[tabindex]': '_tabindex',
'[attr.aria-disabled]': 'disabled || null',
'(blur)': '_resetTabIndex()',
'(focus)': '_setTabIndex()',
'(click)': 'trigger()',
'(click)': '_handleClick($event)',
'(keydown)': '_onKeydown($event)',
},
})
Expand Down Expand Up @@ -181,6 +182,16 @@ export class CdkMenuItem implements FocusableOption, FocusableElement, Toggler,
}
}

/** Handles click events on the item. */
protected _handleClick(event: MouseEvent) {
if (this.disabled) {
event.preventDefault();
event.stopPropagation();
} else {
this.trigger();
}
}

/**
* Handles keyboard events for the menu item, specifically either triggering the user defined
* callback or opening/closing the current menu based on whether the left or right arrow key was
Expand Down
Loading