Vuetify: [Bug Report] v-checkbox & v-radio can toggle only when i clicked component's label

[armadillo-dev]

Environment

Vuetify Version: 2.2.9
Vue Version: 2.6.11
Browsers: Chrome 79.0.3945.130
OS: Mac OS 10.14.6

Steps to reproduce

1. go to reproduction link
2. click checkbox input or radio input

Expected Behavior

toggle component(v-checkbox or v-radio)

Actual Behavior

not working

Reproduction Link

https://codepen.io/armadillo-dev167/pen/eYNOPKy?editable=true

Other comments

i can toggle only when i clicked component's label

[adarshmadrecha]

Even after v2.2.10, having this issue.

[vlourme]

Getting this too, the select control click seems offset.

(Only the red zone can be clicked on my tests, only around borders is clickable)

[denozavr]

As a temporary fix, which helped me, you could use the next CSS globally (if all your radios/checkboxes have default ripple=true)

     .v-input--selection-controls__ripple{
        z-index: 1;
    }

[KaelWD]

If all your checkboxes have ripple=true then update vuetify, if not then wait for 2.2.11

[armadillo-dev]

I fixed this issue after update to 2.2.10
thx you!!

[rlemaigre]

I'm not sure if I should open a new issue or if it is proper to comment an old one, but this is still not working for me with Vuetify 2.2.18 (tested in Chrome and Firefox). It seems the ripple is hiding the checkbox. Only the temporary fix mentioned above resolved the issue.

[jacekkarczmarczyk]

I can't reproduce this particular issue after updating vuetify to 2.2.18, but if you can please create a new one

[azalpacir]

Updated to version 2.2.22, still getting the same issue.

[rlemaigre]

I remember that deleting my node_modules folder and package-lock.json, then reinstalling all the dependencies solved the problem for me a month ago when I commented this issue. Or perhaps it is something else I did, I don't know. Just something to try...

[azalpacir]

Thanks will try, i did check the node_modules in the browser it got updated to the said version.

[azalpacir]

I remember that deleting my node_modules folder and package-lock.json, then reinstalling all the dependencies solved the problem for me a month ago when I commented this issue. Or perhaps it is something else I did, I don't know. Just something to try...

Still didn't work :(

[hansenconnor]

This appears to still be broken - fix above solves the issue
.v-input--selection-controls__ripple{
z-index: 1;
}