Closed jhenderson2099 closed 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":
Fixed with @skyux/theme@3.13.1
.
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