[Bug Report][3.0.0] VSwitch: ripple only triggers when clicking directly on handle

tve commented 2 years ago

Environment

Vuetify Version: 3.0.0-beta.8 Vue Version: 3.2.36 Browsers: Chrome 102.0.5005.149 OS: Linux x86_64

Steps to reproduce

watch the attached video
open the codepen
click the switch to turn it on
position the cursor on the knob so it will land outside the bar after clicking
click, watch the switch toggle, observe that the cursor still shows a pointer hand
click again, nothing happens
keep clicking and nothing happens, small movements in the cursor change the behavior

Expected Behavior

clicking anywhere on the v-switch element should toggle the switch

Actual Behavior

there are dead zones

Reproduction Link

https://codepen.io/codesurfr/pen/eYMXMjL

Video: https://youtu.be/ke3ztrdSFjA Apologies for the crappy quality, I'm screen-recording challenged (linux w/wayland mess), you can faintly see the mouse clicks in the ripple on the background of the v-switch element and you can also hear them.

Other comments

I colored some of the areas in the v-switch to try to determine where clicking works and where it doesn't, but it's not conclusive. The problem shows up both in latest vivaldi and latest linux firefox 102.0.1

johnleider commented 2 years ago

I'll ask the same thing here as https://github.com/vuetifyjs/vuetify/issues/15668, what is your use-case for using v-ripple on the input?

tve commented 2 years ago

I updated the codepen to 3.0.0 release abnd also removed the explicit v-ripple. The dead zones remain.

lioneaglesolutions commented 1 year ago

Seems OK to me to be honest...

You can always change z-index on the knob itself which would place it on top of the label and make the ripple visible if that's what this issue is explaining - I'm not 100% sure on the exact problem. @johnleider

vuetifyjs / vuetify