bug: The ripple effect does not work on ion-item with click-event.

Bug Report

Ionic version: [x] 4.x

Current behavior: The ripple effect does not work on ion-item with click-event. Please see the demo below in Related code section.

Expected behavior: All clickable ion-items should have a ripple effect. No need for the ion-ripple-effect element. If an item has a href attribut, it works. This should also work for click-event etc. If there is a case, you really do not want the ripple-effect on a specific ion-item with click-event, you should pass an attribute option. But by default, every clickable item should have this material button feedback. (UX)

Steps to reproduce: Please see the demo below in Related code section.

Related code:

<ion-list lines="none">
  <ion-list-header>
    <ion-label>Items</ion-label>
  </ion-list-header>
  <ion-item (click)="onClick()">
    <ion-icon slot="start" color="medium" name="bug"></ion-icon>
    <ion-label>I'm a click item.</ion-label>
  </ion-item>
  <ion-item (click)="onClick()">
    <ion-icon slot="start" color="medium" name="bug"></ion-icon>
    <ion-label>I'm a click item with ripple element.</ion-label>
    <ion-ripple-effect type="bounded"></ion-ripple-effect>
  </ion-item>
  <ion-item href="">
    <ion-icon slot="start" color="medium" name="checkmark"></ion-icon>
    <ion-label>I'm a href element. Ripple works.</ion-label>
  </ion-item>
</ion-list>

Demo Stackblitz

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.5 (C:\Users\%USERNAME%\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.8.1
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 16 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.8

System:

   Android SDK Tools : 26.1.1 (C:\Users\%USERNAME%\AppData\Local\Android\Sdk)
   NodeJS            : v10.15.3 (C:\Program Files\nodejs\node.exe)
   npm               : 6.4.1
   OS                : Windows 10

[brandyscarney]

I started to reply at the same time as Manu 🙂

In order to have a click effect on an item with an onClick / (click) event you need to add button to the ion-item. This is due to the fact that it is not possible for us to check if event listeners exist on elements. Here is our documentation for this: https://ionicframework.com/docs/api/item#clickable-items

[manucorporat]

You have to specify that ion-item is a button:

<ion-item button (click)="doSomething()">