Ripple: Has no effect on touch enabled desktop screens

[zawasp]

Describe the bug

Ripple effect doesn't appear to work on touch enabled desktop screens when using the mouse/touchpad. It does work by touching the screen.
This can be seen even on the demo of PrimeReact homepage.

Here's a link to a video for this behaviour
Ripple not working

This is happening on all Chrome based browsers (Edge, Brave, Chrome) on Windows 11.

Reproducer

https://primereact.org/

PrimeReact version

9.6.2

React version

18.x

Language

TypeScript

Build / Runtime

Next.js

Browser(s)

Chrome Version 116.0.5845.180 (Official Build) (64-bit), Edge 116.0.1938.76 (Official build) (64-bit), Brave Version 1.57.62 Chromium: 116.0.5845.180 (Official Build) (64-bit),

Steps to reproduce the behavior

1. Go to the Ripple component demo and click
   OR
   Go to any component demo which supports ripple and enable it in the theme (E.g. button)

Result: no ripple effect is visible

Expected behavior

Ripple effect should be visible

[zawasp]

Note that Ripple works fine on other Prime products - PrimeNG, PrimeVue

[melloware]

@zawasp can you try this reproducer: https://codesandbox.io/s/primereact-demo-forked-r6zksp?file=/src/App.js

I am using Chrome and Ripple is working fine?

[zawasp]

@melloware tried your demo, same behaviour as in the video I attached (with Chrome, Brave, Edge on Windows 11). The strange thing is even your demo works fine if I turn on developer tools and switch to mobile in the device toolbar.

LE: ripple works fine on native mobile devices as well, and as well on Chrome on Ubuntu. Can't figure out what's happening on Windows.

[melloware]

So weird I am using windows 11 and chrome. Can you check your version of chrome? I am on 116.

[zawasp]

See all browser versions in the first post. I'm on latest on all.

[melloware]

This is so weird I can't reproduce on either of my Windows 11 machines. using latest Chrome. Version 116.0.5845.180 (Official Build) (64-bit)

[zawasp]

Yeah I know, I'm puzzled as well. I tried with incognito, disabled all browser extensions as well. Really odd. Maybe set this as lower priority and wait if someone else has the same issue.

[melloware]

Those were going to be my next suggestions to disable browser plugins etc. What I don't get is why does it start working when you open Dev Tools and go to mobile mode?

[melloware]

@zawasp its not just you found this old ticket we closed: #4153

So there is some secret combination of things making this not work but I am stumped as to what that might be!

[SoyDiego]

@zawasp can you try this reproducer: https://codesandbox.io/s/primereact-demo-forked-r6zksp?file=/src/App.js

I am using Chrome and Ripple is working fine?

It's very weird. I have checked your code in Linux/Firefox/Chrome and works perfectly.
I realized something weird also with my display. (I don't know if is a similar problem with ripple or not)

Look this @melloware:

Component Menu in my display, the hover effect is not working.

doesnt.work.mp4

But If I check in another display, works perfectly.

works.mp4

Sorry for the quality of the video, but was the only way that I can show this problem.
I don't know if something similar is happening with @zawasp, but for me the ripple it's working good in both displays xD

[melloware]

weird so it must be a display setting causing the ripple not to show!

[zawasp]

So why does it work when turning on Developer Tools and switching to mobile? What could possibly that do to the browsers?
By the way I'm not using an external display, it's the built in one. And it works on the same display if I use Chrome Linux with WSLg within the same Windows session

[melloware]

We still have no idea why but @SoyDiego was just chiming in he has two monitors and it works on one but not the other. So its SOMETHING environmental? Resolution? Percentage scale?

[zawasp]

Good point, I'll try with different scaling. I'm on a HDPI screen.

[melloware]

That might explain why switching to mobile makes it work if the browser is somehow changing the resolution or scale or something like that?

[SoyDiego]

Good point, I'll try with different scaling. I'm on a HDPI screen.

Or try different display. I have my laptop and another display and If I put the window in the middle of both I can see the hover effect on the left but not on the right.

[zawasp]

Ok I found the issue. It doesn't work on touch enabled screens. I have a touch enabled Dell XPS 4K laptop. I disabled the touch screen and it started working. Probably the error originates from here:
https://github.com/primefaces/primereact/blob/master/components/lib/ripple/Ripple.js#L43
So mouseDown events are not tracked if the device also has a touchscreen. This should be an easy fix.
I'll rename the bug.

LE: what's funny is that it works if I touch the screen in the Ripple zone. But not with a mouse / touchpad.

[melloware]

Awesome now I can fix it!!

[melloware]

I think I know the correct way to handle this the "React" way

[SoyDiego]

Good job, finally was something with the Display 😂

[SoyDiego]

Sorry for bother in this post again, @zawasp could you confirm me if the same problem is PrimeNG and PrimeVue? I guess so, but I don't have a touch display and with developer tools the touch is working ok.
If you confirm me, I will create the issues in the others repos and try to fix it too.

Thanks again and nice researching job!

[zawasp]

Sorry for bother in this post again, @zawasp could you confirm me if the same problem is PrimeNG and PrimeVue?

No, both PrimeVue and PrimeNG work fine with touch displays and mouse simultaneously.

[SoyDiego]

Sorry for bother in this post again, @zawasp could you confirm me if the same problem is PrimeNG and PrimeVue?

No, both PrimeVue and PrimeNG work fine with touch displays and mouse simultaneously.

Great, thanks for the double check!

[melloware]

OK I researched the issue arises from this: #3526

Which if you read Windows is the only OS that enabled both Touch and Mouse events: https://stackoverflow.com/questions/13655919/how-to-bind-both-mousedown-and-touchstart-but-not-respond-to-both-android-jqu

[melloware]

PR submitted.