trimox / angular-mdc-web

Angular wrapper for Material Design (Web) Components
https://trimox.github.io/angular-mdc-web
MIT License
519 stars 87 forks source link

Ripple not working on List item #2277

Open touficbatache opened 3 years ago

touficbatache commented 3 years ago

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>
  2. Click on the list item
  3. 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>