Description
openedon Feb 8, 2017
Bug
Conventionally (html), and all tags are enabled unless explicitly disabled
- In the example below, the md-menu-item is not explicitly disabled yet not clickable.
// in option.component.ts
get visibleOptions() {
return [
{
name: 'Login',
path: '/access/login',
icon: 'fingerprint',
},
...
]
...
}
<-- in option.component.html !-->
<button md-icon-button class="menu md-icon-button" [mdMenuTriggerFor]="optionMenu">
<md-iconmore_vert</md-icon>
</button>
<md-menu #optionMenu="mdMenu">
<a md-menu-item *ngFor="let option of visibleOptions" [routerLink]="[option.path]">
<md-icon>{{option.icon}}</md-icon>
<span>{{option.name}}</span>
</a>
</md-menu>
- In the example below: the disabled attribute is set to
undefined
which should disable the item as per the source code here. It is not disabled and not clickable either.
<a md-menu-item
*ngFor="let option of visibleOptions"
[routerLink]="[option.path]"
[disabled]="option.disabled">...</a>
- In the example below: the disabled attribute is set to
false
. The item is not disabled, and not clickable.
<a md-menu-item
*ngFor="let option of visibleOptions"
[routerLink]="[option.path]"
[disabled]="false">...</a>
- In the example below: the disabled attribute is set to
true
. The item is disabled, and is clickable.
<a md-menu-item
*ngFor="let option of visibleOptions"
[routerLink]="[option.path]"
[disabled]="true">...</a>
- In the example below: the disabled attribute is set to
null
. The item is disabled, and is clickable.
<a md-menu-item
*ngFor="let option of visibleOptions"
[routerLink]="[option.path]"
[disabled]="null">...</a>
What is the expected behavior?
We will benefit from setting the default value of the _disabled
field of the class to false
. here.
Then we can allow overwriting as per this line.
Then we class can properly stop propagating a click event as per this line.
What is the current behavior?
The current behavior as per 1.0.0-Beta-1 is not correct and consistent. Enabled menu-items are not clickable. But the disabled one(s) are.
What are the steps to reproduce?
http://embed.plnkr.co/gcJw7FFOMg2RKD5sSx5g/
What is the use-case or motivation for changing an existing behavior?
Unless I disable something, it should be enabled by default. Disabling clicks and preventing them from propagating should also work.
Changing this line to the following may be the right approach.
_disabled = false;
Changing this setter to the following may be the right approach.
set disabled(value: boolean) {
this._disabled = value === true || false;
}
Which versions of Angular, Material, OS, browsers are affected?
@angular/cli: 1.0.0-beta.30
node: 6.9.5
os: darwin x64 (Sierra)
@angular/common: 2.4.6
@angular/compiler: 2.4.6
@angular/core: 2.4.6
@angular/forms: 2.4.6
@angular/http: 2.4.6
@angular/material: 2.0.0-beta.1
@angular/platform-browser: 2.4.6
@angular/platform-browser-dynamic: 2.4.6
@angular/router: 3.4.6
@angular/cli: 1.0.0-beta.30
@angular/compiler-cli: 2.4.6
Chrome: latest.