trimox/angular-mdc-web

Ripple not working on List item

touficbatache opened this issue · 0 comments

Describe the bug
The ripple is not showing when clicking on a list item.

To Reproduce
Steps to reproduce the behavior:

  1. Add a list to your project, the following is a very brief and simple example:
<mdc-list>
  <mdc-list-item>
    List item
  </mdc-list-item>
</mdc-list>
  1. Click on the list item
  2. Observe how the ripple doesn't fire

Expected behavior
A material ripple should fire on the list item.

Screenshots
No screenshots.

What Angular MDC version are you using?
v6.0.0-canary.9

What OS are you using?:
MacOS, but this issue affects every OS.

What browser(s) is this bug affecting?:
All browsers.

Solution
The <mdc-list-item> should automatically add <span class="mdc-list-item__ripple"></span> as a child. The code would look like so:

<mdc-list>
  <mdc-list-item>
    <span class="mdc-list-item__ripple"></span>
    List item
  </mdc-list-item>
</mdc-list>