Ripple effect on button does not work in Ultima 9

[comanlaviniaelena]

Hi,

I've updated my project from Angular 8, Ultima Theme 8 to Angular 9, prime ng 9 and ultima theme 9.
Ripple effect on buttons does not work anymore.

In ultima 8, ripple effect was created by default as:
<span class="ink ripple-animate" style="height: 85px; width: 85px; top: -25.4688px; left: 17.7656px; pointer-events: none;"></span>

In ultima 9, ripple effect is not added at all.

Could you please help?

[merve7]

Hi,
Does your app.main.component.ts file include ripple effects codes? Could you please check?

[asesovici]

Hi merve7, I picked up this issue from comanlaviniaelena.

Our app.main.component.ts file still includes the ripple effects code, yes. As far as I could debug, the problem seems to be related to the execution timing of the following line:

Code: Select all

document.addEventListener('DOMContentLoaded', this.rippleInitListener);

By the time the rippleInitListener is bound to the DOMContentLoaded event, hasn't this been executed already?

If I try to move the content of the init() function to bindRipple(), the ripple effect works as expected:

Code: Select all

  
  bindRipple() {
    this.rippleMouseDownListener = this.rippleMouseDown.bind(this);
    document.addEventListener('mousedown', this.rippleMouseDownListener, false);
  }

However, I can't figure out why the binding to the DOMContentLoaded event works in the Ultima theme showcase and it also worked for us in Ultima 8.

[asesovici]

Hi merve7,

Any chance you managed to check this issue?

We also noticed that the ripple effect isn't working in the PrimeNG Ultima demo either, when navigating to the Login page: https://www.primefaces.org/ultima-ng/#/login.
In addition to this, if you happen to navigate to it from another page (e.g. Dashboard) and then go back to it, then the ripple effect stops working in the previous page as well.

[mert.sincan]

Hi,

We'll check and get back to you asap.

Best Regards,

[comanlaviniaelena]

Hello,

Any news on the ripple effect problem?

Thank you in advance,
Lavinia

[merve7]

Hi,
We fixed the ripple effect issue on the login page (https://www.primefaces.org/ultima-ng/#/login) and released it with the new version(v10.0.1).
Also, we changed ripple effect implementation with v10 please check from the ripple page (https://primefaces.org/primeng/showcase/#/ripple)

Best Regards,