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

[Domvel]

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 ([email protected])
   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

[Domvel]

Workaround for all you guys which can't wait for a fix. Just add href to the ion-item without any value, to prevent navigation or page reload. Example:

<ion-item href="" (click)="doSomething()">
  <ion-icon name="checkmark" slot="start"></ion-icon>
  <ion-label>Click me!</ion-label>
</ion-item>

or just:

<ion-item href (click)="doSomething()">
  <ion-icon name="checkmark" slot="start"></ion-icon>
  <ion-label>Click me!</ion-label>
</ion-item>

Demo

[manucorporat]

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

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

[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

[Domvel]

@brandyscarney @manucorporat Thank you. 🙂 Omg, I visited the docs multiple times. And I missed the Clickable Items section. It's such a huge font. But anyway... Sorry 🙏

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.