search

blackbaud / skyux2

SKY UX 2 is the new version of Blackbaud’s user experience framework that implements Blackbaud design patterns. It extends the framework to abstract many complexities of modern web development and takes advantage of Angular 2 to increase the tooling, testing, and performance available.
https://developer.blackbaud.com/skyux
MIT License
32 stars 65 forks source link

sky-radio uses absolute positioning within a scrolling modal; Able to select radio button outside of control #2382

Closed jhenderson2099 closed 4 years ago

jhenderson2099 commented 4 years ago

Expected behavior

You must make a choice using one of the skyux radio buttons and only the skyux radio button

Actual behavior

It is possible to select a skyux radio button without actually choosing the radio button control itself

Steps to reproduce

Refer to https://stackblitz.com/edit/radio-btn-absolute-positioning . The actual radio button input control is using absolute positioning which "locks" the input control to a specific position on the page (or modal). This means that if there are too many controls on the page / modal, you will need to scroll to access other parts of the page/modal. However, the positions of the underlying input control are "locked" to a specific area on the screen. As a result, it is possible to select a radio button control by "clicking" the input control have it affect/select the actual radio button control.

Also see the GIF that Kevin McLaughlin posted in the #1bb-skyux-apps channel in Slack: for a visual of what this might look like: https://blackbaud.slack.com/archives/C3TQ4C0KG/p1586956043033100

Stackblitz

https://stackblitz.com/edit/radio-btn-absolute-positioning

The above Stackblitz was cobbled together using the SkyUx Modal and Radio control Stackblitz demos.

Severity

Impact

Blackbaud-TomSisson commented 4 years ago

We are experiencing this as well with both sky-radio and sky-checkbox within a scrolling modal. Here is a screenshot with the .sky-switch-input opacity set to 1 to see each control's "ghost": image

Blackbaud-SteveBrush commented 4 years ago

Fixed with @skyux/theme@3.13.1.