ion-ripple-effect is not working

[jtushar53]

Bug Report

Ionic version:

[x] 4.x

Describe the Feature Request
ion-ripple-effect not working with ion-col, its just getting omitted from the html and hides the ion-col element

Describe Preferred Solution
ion-ripple-effect should add ripple effect to ion-col element as referred in the docs
https://ionicframework.com/docs/api/ripple-effect

Describe Alternatives

Related Code

<ion-grid>
     <ion-row>
       <ion-ripple-effect>
         <ion-col
           size-md="4"
           size-xs="12"
           size-sm="6"
           size-lg="4"
           *ngFor="let item of pendingitems"
         >
           <ion-card text-left>
          </ion-card>
         </ion-col>
       </ion-ripple-effect>
     </ion-row>
   </ion-grid>

Additional Context

[robingenz]

It also does not work with a simple div: https://codepen.io/robingenz/pen/mvGKvP

[geekzolanos]

Trying to update to Ionic 4.0.2 doesn't fix the problem.

Reviewing the RippleEffect component in source, i cannot found any procedure to capture the click event on parent. So i suppose we must to capture the event and call to addRipple method manually. I made the following workaround for this:

import { HostListener, ViewChild } from '@angular/core';
import { IonRippleEffect } from '@ionic/angular'; 

 @ViewChild(IonRippleEffect) private rippleEffect: IonRippleEffect; 
 @HostListener("click", ['$event'])
  private onClick(e: MouseEvent) {
    this.rippleEffect.addRipple(e.x, e.y);
  }

However, besides the ripple effect is being created, the resultant div (.ripple-effect) it doesn't get removed after a while, the addRipple method defines a setTimeout for this, but for some reason it doesn't get triggered. So we must remove it manually reusing a non exported function on the file:

private removeRipple(ripple: HTMLElement) {
  ripple.classList.add('fade-out');
  setTimeout(() => {
    ripple.remove();
  }, 200);
}

Then, we need to catch the '.ripple-effect' node under the component's shadow root and remove it when the effect gets finished. Here's the full example:

import { HostListener, ViewChild, ElementRef } from '@angular/core';
import { IonRippleEffect } from '@ionic/angular';

@ViewChild(IonRippleEffect) private rippleEffect: IonRippleEffect;
@ViewChild(IonRippleEffect, {read: ElementRef}) private rippleEffectRef: ElementRef;

@HostListener("click", ['$event'])
  private onClick(e: MouseEvent) {
    this.rippleEffect.addRipple(e.x, e.y).then(() => {
      let ripple: HTMLElement = this.rippleEffectRef.nativeElement.shadowRoot.querySelector(".ripple-effect");
      this.removeRipple(ripple);
    });
  }

  private removeRipple(ripple: HTMLElement) {
    ripple.classList.add('fade-out');
    setTimeout(() => {
      ripple.remove();
    }, 200);
  }

PS: Also it's required add a 'position: relative' and a 'overflow: hidden' to parent node. Otherwise, the ripple effect will overflow the container's borders.

[kensodemann]

Added to backlog. I am working with a community member who is also running into this.

[brandyscarney]

There are two reasons this doesn't work:

1. The ion-ripple-effect needs the parent element to have position: relative because it is absolutely positioned, otherwise it will just go over everything on the page.
2. It looks for the ion-activatable class on the parent element because we use this to determine whether or not an element is clickable.

I've updated the Codepen from @robingenz to show it working with the div: https://codepen.io/ionic/pen/PoYQMzO

Note: I also added user-select: none to avoid selecting the text in the div on click

I believe this could just be a documentation issue.

[brandyscarney]

I updated the documentation for ripple effect to include steps on adding the CSS and class: https://github.com/ionic-team/ionic/blob/master/core/src/components/ripple-effect/readme.md

I think the extra CSS is something we could add to .ion-activatable in the ionic CSS. We could possibly add the class by default to the ripple parent, but I think being able to toggle this class with a disabled element gives the user more control.

[nguyenkien]

However, besides the ripple effect is being created, the resultant div (.ripple-effect) it doesn't get removed after a while, the addRipple method defines a setTimeout for this, but for some reason it doesn't get triggered. So we must remove it manually reusing a non exported function on the file:

After digging ionic source code, I found out this way will remove it

ripple.addRipple(x, y).then(remove => remove());

[brandyscarney]

I'm going to close this since it seems it was an issue with the documentation and the usage has been updated here: https://ionicframework.com/docs/api/ripple-effect#usage

I updated the above Codepen to include an example of the ripple in both a row & columns in a grid: https://codepen.io/brandyscarney/pen/BaKeRNM