vmware-archive / clarity

Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.
http://clarity.design
MIT License
6.43k stars 762 forks source link

First radio button in clr-radio-wrapper directive (and css class) are not clickable on the circular radio button #2643

Closed JoshuaNitschke closed 6 years ago

JoshuaNitschke commented 6 years ago

Describe the bug

The first radio button (clr-radio-wrapper) in a clr-radio-container will not allow a click on the circular portion of the control. You must click on the label. This seems to be related to some display issue as I am able to hack-fix this using a custom css override raising the z level of the control:

.clr-radio-wrapper .clr-control-label {
    z-index: 1;
}

However, if the clr-radio-container directive is removed, leaving two adjacent clr-radio-wrapper containers, both circles are clickable.

How to reproduce

This is reproducible on the docs site: https://vmware.github.io/clarity/documentation/v0.13/radio

Go to any of the examples that have the wrapper class:

And you will see that you cannot click the circle on the first radio button. ## Expected behavior I should be able to click the circle radio button, not just the label, to select the first radio button in a radio wrapper div. ## Versions **App** "dependencies": { "@angular/animations": "^6.1.0", "@angular/cdk": "^6.4.7", "@angular/common": "^6.1.0", "@angular/compiler": "^6.1.0", "@angular/core": "^6.1.0", "@angular/forms": "^6.1.0", "@angular/http": "^6.1.0", "@angular/platform-browser": "^6.1.0", "@angular/platform-browser-dynamic": "^6.1.0", "@angular/router": "^6.1.0", "@auth0/angular-jwt": "^2.0.0", "@clr/angular": "^0.13.0", "@clr/icons": "^0.13.0", "@clr/ui": "^0.13.0", "@webcomponents/custom-elements": "^1.0.0", "angular-notifier": "^4.1.1", "core-js": "^2.5.4", "hammerjs": "^2.0.8", "ng-cli-pug-loader": "^0.1.3", "rxjs": "^6.0.0", "zone.js": "~0.8.26" **Device:** * Type: Macbook Pro * OS: OS X 10.13.6 (17G65) * Browsers: ** Chrome 68.0.3440.106 ** Safari Version 11.1.2 (13605.3.8) ## Additional notes Here is a video of me clicking on the top button without success (the issue i am reporting), then changing the css zindex (the hack fix i implemented), verifying the proper behavior, then removing that css and verifying it again is not working as expected. ![sep 11 2018 12_26 pm](https://user-images.githubusercontent.com/33307206/45382768-1c6b2e00-b5be-11e8-9595-9bd7260768ff.gif)
github-actions[bot] commented 4 years ago

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.