Vuetify: [Bug Report] Ripple effect makes checkbox and radio button click area too large

[nkovacs]

Versions and Environment

Vuetify: 0.17.3
Vue: 2.5.6
Browsers: Chrome 62.0.3202.94
OS: Linux x86_64

Steps to reproduce

1. Go to https://vuetifyjs.com/components/selection-controls#selection-controls-view, scroll down to #4 Checkboxes - Colors or #5 Radios - Default
2. Try to click a radio button or checkbox in the upper row by clicking on its lowest couple pixels

Expected Behavior

You should be able to click the upper checkbox or radio button

Actual Behavior

The lower checkbox/radio button gets clicked

Reproduction Link

https://vuetifyjs.com/components/selection-controls#selection-controls-view

[nkovacs]

The way the ripple effect is implemented makes this harder to fix. You can't just add pointer-events:none to the ripple span because you have to click it to trigger the effect. However, this also means that clicking the checkbox's label doesn't trigger the ripple effect.
Polymer doesn't ripple when clicking the label: https://www.webcomponents.org/element/PolymerElements/paper-checkbox
Material components for the web does, but the implementation is a bit janky (the focus ripple stays after clicking, and if you click fast enough, there's no ripple): https://material-components-web.appspot.com/checkbox.html

If you remove the ripple effect, you lose the focus effect, so there's no visual indication of focus, and there's also an empty, unclickable area between the checkbox and the label (that is normally covered by the ripple).

[nkovacs]

I fixed this with a bit of css hacking. I made the clickable area 30x30 pixels, so that it covers the 24x30px checkbox/radio button: https://github.com/nkovacs/vuetify/commit/2e315334b6ede4698f4a2dc52dba56cd79da29d5

Since the ripple directive puts a width and height onto the ripple animation element, I had to use !important to override it. I see two solutions to this:

• add an option to the ripple directive to disable setting the width/height and use css to set it, without !important
• add an option to the ripple directive to explicitly set the size

I'd prefer the first one, since all the other sizes come from css in this case.

[nkovacs]

I tried the dev branch. This bug is not fixed.

[KaelWD]

Checkboxes were "fixed" by increasing the top margin, but this still happens with radios.

[nkovacs]

Yeah, I noticed the margin. That's not a fix. I may not want to have a huge margin like that.

[KaelWD]

I agree. I don't think it was intentional, just a side-effect of the overall component restructure.

[catskull]

This bug just popped up for me today, just throwing my hat in the ring!

[johnleider]

This is still on the radar but being pushed to v1.3 due to time constraints.

[johnleider]

Closed via 26af9bf