Skip to content

Commit b135b64

Browse files
crisbetotinayuangao
authored andcommitted
chore(menu): switch menu-item to common coercion logic (#3065)
* `MdMenuItem` to use the common coercion logic when determining the disabled state. * Gets rid of the `@HostBinding` in favor of passing them through the `host` option. Relates to #2985.
1 parent 8b2ae0d commit b135b64

File tree

1 file changed

+24
-14
lines changed

1 file changed

+24
-14
lines changed

src/lib/menu/menu-item.ts

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import {Component, ElementRef, Input, HostBinding, Renderer} from '@angular/core';
1+
import {Component, ElementRef, Input, Renderer} from '@angular/core';
22
import {Focusable} from '../core/a11y/focus-key-manager';
3+
import {coerceBooleanProperty} from '../core/coercion/boolean-property';
34

45
/**
56
* This directive is intended to be used inside an md-menu tag.
@@ -11,40 +12,49 @@ import {Focusable} from '../core/a11y/focus-key-manager';
1112
host: {
1213
'role': 'menuitem',
1314
'[class.mat-menu-item]': 'true',
15+
'[attr.tabindex]': '_getTabIndex()',
16+
'[attr.aria-disabled]': 'disabled.toString()',
17+
'[attr.disabled]': '_getDisabledAttr()',
1418
'(click)': '_checkDisabled($event)',
15-
'[attr.tabindex]': '_tabindex'
1619
},
1720
templateUrl: 'menu-item.html',
1821
exportAs: 'mdMenuItem'
1922
})
2023
export class MdMenuItem implements Focusable {
21-
_disabled: boolean;
24+
/** Whether the menu item is disabled */
25+
private _disabled: boolean = false;
2226

2327
constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
2428

29+
/** Focuses the menu item. */
2530
focus(): void {
26-
this._renderer.invokeElementMethod(this._elementRef.nativeElement, 'focus');
31+
this._renderer.invokeElementMethod(this._getHostElement(), 'focus');
2732
}
2833

29-
// this is necessary to support anchors
3034
/** Whether the menu item is disabled. */
31-
@HostBinding('attr.disabled')
3235
@Input()
33-
get disabled(): boolean { return this._disabled; }
34-
set disabled(value: boolean) {
35-
this._disabled = (value === false || value === undefined) ? null : true;
36+
get disabled() { return this._disabled; }
37+
set disabled(value: any) {
38+
this._disabled = coerceBooleanProperty(value);
3639
}
3740

38-
/** Sets the aria-disabled property on the menu item. */
39-
@HostBinding('attr.aria-disabled')
40-
get isAriaDisabled(): string { return String(!!this.disabled); }
41-
get _tabindex() { return this.disabled ? '-1' : '0'; }
41+
/** Used to set the `tabindex`. */
42+
_getTabIndex(): string {
43+
return this._disabled ? '-1' : '0';
44+
}
45+
46+
/** Used to set the HTML `disabled` attribute. Necessary for links to be disabled properly. */
47+
_getDisabledAttr(): boolean {
48+
return this._disabled ? true : null;
49+
}
4250

51+
/** Returns the host DOM element. */
4352
_getHostElement(): HTMLElement {
4453
return this._elementRef.nativeElement;
4554
}
4655

47-
_checkDisabled(event: Event) {
56+
/** Prevents the default element actions if it is disabled. */
57+
_checkDisabled(event: Event): void {
4858
if (this.disabled) {
4959
event.preventDefault();
5060
event.stopPropagation();

0 commit comments

Comments
 (0)