md-item highjacks the clicks when items are not disabled

[un33k]

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.

[crisbeto]

@un33k the menu is working as expected, although the disabled logic could use a little bit of cleanup. The reason why your Plunkr example isn't working is because you're using a getter to specify the array. This means that the repeater will be re-rendered with a new array every time change detection runs.

What happens here is that you put your mouse button down, we trigger change detection when we render the ripple (this shouldn't happen, I'll address it separately) and the link ends up getting swapped out with one that looks exactly the same. Here's a fork of your example that works as expected.

[un33k]

@crisbeto the plnkr (fork) example you provided is not working for me. I have tried it on Chrome and Safari. Expecting a redirect to google.com but it is not happening. Just a FYI. Thx.

[crisbeto]

The redirect to Google doesn't work, because Plunkr runs examples in an iframe, which doesn't allow cross origin. Here's an updated example that sends you to Plunkr's homepage instead.

[un33k]

@crisbeto works great. thx.