Skip to content

[Bug Report][3.8.6] When a button is touched, the ripple effect cannot be triggered by a mouse click. #21468

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Jesse205 opened this issue May 22, 2025 · 0 comments · May be fixed by #21469
Open
Assignees
Labels
D: ripple T: bug Functionality that does not work as intended/expected
Milestone

Comments

@Jesse205
Copy link
Contributor

Jesse205 commented May 22, 2025

Environment

Vuetify Version: 3.8.6
Vue Version: 3.5.14
Browsers: Edge 136.0.0.0
OS: Windows 10, Windows

Steps to reproduce

Physical Machine Testing

  1. Purchase a laptop with touch screen functionality.
  2. Open the demo, touch the button, and the ripple effect is triggered normally.
  3. Click the button with the mouse, and the ripple effect fails to trigger normally.

Device Emulation (Common in Development Scenarios)

  1. Open the browser's developer tools.
  2. Enable device emulation.
  3. Click the button (the browser will simulate touch behavior), and the ripple effect is triggered normally.
  4. Disable device emulation.
  5. Click the button again, and the ripple effect fails to trigger.

Microsoft Remote Desktop

  1. Prepare a smartphone or tablet that supports Microsoft Remote Desktop.
  2. Use the remote desktop on the smartphone or tablet to log in to a Windows computer, and open the demo on the computer.
  3. Touch the button on the smartphone or tablet, and the ripple effect is triggered normally.
  4. Exit the remote desktop and log in to the account on the physical machine.
  5. Click the button with the mouse, and the ripple effect fails to trigger.

NetEase UU Remote (or Other Remote Desktops Supporting Windows Touch)

  1. Prepare a smartphone or tablet.
  2. Download NetEase UU Remote (or another remote desktop that supports Windows touch).
  3. Connect to the Windows computer using the remote desktop app on the smartphone or tablet.
  4. Open the demo on the computer.
  5. Touch the button on the smartphone or tablet, and the ripple effect is displayed normally.
  6. Click the button with the mouse, and the ripple effect fails to display.

Expected Behavior

Ripples are always displayed correctly

Actual Behavior

The ripple effect cannot be displayed.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

This issue was first mentioned in #20369

Jesse205 added a commit to Jesse205/vuetify that referenced this issue May 22, 2025
@KaelWD KaelWD added T: bug Functionality that does not work as intended/expected D: ripple labels May 26, 2025
@KaelWD KaelWD added this to the v3.8.x milestone May 26, 2025
@KaelWD KaelWD self-assigned this May 26, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
D: ripple T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants