[Bug Report][3.0.0] VSwitch shows inconsistent ripple

[tve]

Environment

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

Steps to reproduce

• open the codepen
• click on the switch, either on the round knob or on the label
• observe that the ripple is inconsistent
• remove the v-ripple directive
• click again and observe that the ripple is inconsistent (no ripple when clicking on the bar or label)

Expected Behavior

• Consistent ripple no matter where the click happens
• ability to add a more prominent ripple than just the faint knob shadow pulsing (e.g. using the v-ripple directive)

Actual Behavior

inconsistent ripple

Reproduction Link

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

[johnleider]

You shouldn't be binding v-ripple exclusively. It's already done so in v-switch. What is your use-case here?

[tve]

I updated the codepen to 3.0.0 release and removed the explicit v-ripple.

The use-case is that I'm handling the @update:modelValue event explicitly and only toggling the model-value prop after server acknowledgment. Usually this is fine but sometimes the delay causes the user to wonder whether the click was actually registered. The fact that if one clicks on the label (for example) there is no ripple means that there is absolutely no visual feedback. Even when clicking on the button only the very slim outline of the knob ripples, which can be very difficult to see.

[johnleider]

I suggest using the loading prop.

If you have any questions, please reach out to us in our Discord community.