Material: md-ink-ripple triggers when child element is clicked

[mortenmoulder]

Actual Behavior:

• What is the issue? *
  
  
  
  • When a parent element has md-ink-ripple attached and a child element is clicked (like a md-button or md-checkbox)
  
  
• What is the expected behavior?
  
  
  
  • It should not ripple when something with an action is attached to it. Something like a checkbox, a button, or a link should not make the parent ripple.
  
  

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue:
  
  
  
  • http://codepen.io/anon/pen/QKwkOB
  
  
• Details:
  
  
  
  • Replace md-checkbox with md-button or anything else that has a trigger.
  
  

Angular Versions: *

• Angular Version:
  
  
  
  • Up to 1.5.8
  
  
• Angular Material Version:
  
  
  
  • Up to 1.1.1
  
  

Additional Information:

• Browser Type: *
  
  
  
  • Chrome
  
  
• Browser Version: *
  
  
  
  • Latest
  
  
• OS: *
  
  
  
  • Windows 10
  
  

If I have a whole card I want to apply md-ink-ripple to, it should not be triggered by a child with an action to it.

"But why not just move your action element outside the md-ink-ripple element?"

..you might ask. Well, if I have an md-card with a few buttons, links, checkboxes etc. inside, I don't want the whole card to ripple when I press the action. With that said, I still want to click between the action elements to get the ripple effect, meaning I would HAVE to have the md-ink-ripple attached to the parent.

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[mortenmoulder]

EDIT: It is known that $event.stopPropagation() will stop this. And it will. I was simply using ng-click when a fellow StackOverflow-er noticed that md-ink-ripple triggers on mousedown. That means that instead of doing ng-click="$event.stopPropagation() it should be ng-mousedown="$event.stopPropagation() instead.

Is this intended?

[EladBezalel]

As we want to support touch and click altogether we use mousedown as its more generic than click,

Using ng-mousedown="$event.stopPropagation()" will solve it. I don't think we should find a why to "solve" it as we don't want to forcestopPropagation` and to leave it for the user to decide/act.

Thanks.

[oemmes]

I had the same requirement some days ago. I solved it by using a dummy <div> for the ink ripple.

Though I had to call $event.stopPropagation() in the button's ng-click to avoid triggering the ng-click of the card.

http://codepen.io/anon/pen/BLNjza

<md-card ng-click="ctrl.cardAction()">
    <div md-ink-ripple class="md-ink-ripple-dummy"></div>

    <md-card-content>
        <p>My content</p>
    </md-card-content>

    <md-card-actions>
        <md-button ng-click="$event.stopPropagation();ctrl.buttonAction()">Button action</md-button>
    </md-card-actions>
</md-card>

md-card {
    position: relative ;
    cursor: pointer ;
}

.md-ink-ripple-dummy {
    position: absolute ;
    top: 0 ;
    bottom: 0 ;
    left: 0 ;
    right: 0 ;
}

[mortenmoulder]

@oemmes That's a way to do it yeah. However, I think I'll just stick with ng-mousedown="$event.stopPropagation()" for now.

[dehart]

This has been bugging me for a while.
Someone should add this to the documentation