Button: Ripple animation missing on touch down - Githubissues

primefaces / primereact

The Most Complete React UI Component Library

https://primereact.org

MIT License

6.81k stars 1.04k forks source link

Button: Ripple animation missing on touch down #3497

Closed kkimdev closed 2 years ago

kkimdev commented 2 years ago

Describe the bug

No ripple animation on Button touch down on mobile. (or simulated mobile device using Chrome dev tool)

On desktop, mouse down triggers the ripple animation correctly.

This should be an easy quick fix, adding a touch-down handler at https://github.com/primefaces/primereact/blob/5040da2d5b0be5d12a982b1852fb1d79a732747c/components/lib/ripple/Ripple.js#L27

Reproducer

https://codesandbox.io/s/primereact-test-forked-04yc5k

PrimeReact version

8.6.1

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Chrome

Steps to reproduce the behavior

Create PrimeReact button with ripple effect
On mobile, press the button with your finger

No ripple animation shown

Expected behavior

Ripple animation should be shown.

kkimdev commented 2 years ago

cc @Lanace

melloware commented 2 years ago

Thanks for the report. Check out my PR.