Components: [md-button] will not call click event when nested inside [md-card]

Created on 1 Dec 2016  路  3Comments  路  Source: angular/components

Bug:

While a [md-button] is nested inside a [md-card] either [md-card] or nested in [md-card-actions] the (click) event is not called.

What is the expected behavior?

The click event should fire.

What is the current behavior?

The click event does not fire.

What are the steps to reproduce?

Place a button with a (click)="func()" attribute inside a [md-card] element and it will not call the event.
Plunker example

Which versions of Angular, Material, OS, browsers are affected?

Angular 2 - 2.2.0
Material - 2.0.0-alpha.10
OS - windows 10
Chrome

Update 12/1/2016

I was messing around and also found that if you move the (click)="func()" from to the button (click)="func()" will work however the (click)="func()" on the will no longer fire off.

P2

Most helpful comment

It doesn't look like this is an issue. The click event isn't being called, because both the md-button and the md-card have a click handler. When you click the button, the click event propagates up to the card which then resets the value. If you look at the HTML:

<md-card (click)="setTest('Home')"> <!-- Click event propagates to here, now the value is reset back to 'Home' -->
  <!-- some content -->
  <md-card-actions *ngIf="test === 'Home'">
    <button md-button (click)="setTest('NA');">THIS WONT CALL CLICK EVENT</button> <!-- This will be called first when click. The test value is now at 'NA'-->
  </md-card-actions>
</md-card>

@dzrust, you can avoid this by either removing the click event from the card or stopping the event propagation:

<md-card (click)="setTest('Home')">
  <!-- some content -->
  <md-card-actions *ngIf="test === 'Home'">
    <button md-button (click)="setTest('NA'); $event.stopPropagation()">This works now</button>
  </md-card-actions>
</md-card>

All 3 comments

@crisbeto I took a quick look at the Plunker and something seems amiss, but I'm not sure where the problem lies.

It doesn't look like this is an issue. The click event isn't being called, because both the md-button and the md-card have a click handler. When you click the button, the click event propagates up to the card which then resets the value. If you look at the HTML:

<md-card (click)="setTest('Home')"> <!-- Click event propagates to here, now the value is reset back to 'Home' -->
  <!-- some content -->
  <md-card-actions *ngIf="test === 'Home'">
    <button md-button (click)="setTest('NA');">THIS WONT CALL CLICK EVENT</button> <!-- This will be called first when click. The test value is now at 'NA'-->
  </md-card-actions>
</md-card>

@dzrust, you can avoid this by either removing the click event from the card or stopping the event propagation:

<md-card (click)="setTest('Home')">
  <!-- some content -->
  <md-card-actions *ngIf="test === 'Home'">
    <button md-button (click)="setTest('NA'); $event.stopPropagation()">This works now</button>
  </md-card-actions>
</md-card>

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

3mp3ri0r picture 3mp3ri0r  路  3Comments

vanor89 picture vanor89  路  3Comments

julianobrasil picture julianobrasil  路  3Comments

MurhafSousli picture MurhafSousli  路  3Comments

savaryt picture savaryt  路  3Comments