search

blackbaud / skyux1

DEPRECATED This site contains the codebase for the AngularJS (1.x) implementation of the SKY UX framework. We no longer support this version of SKY UX, and we recommend that you use the latest version instead. https://developer.blackbaud.com/skyux/
MIT License
51 stars 68 forks source link

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

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.

jhenderson2099 commented 4 years ago

This was accidentally logged with @blackbaud/skyux. A new ticket has been created for @blackbaud/skyux2. https://github.com/blackbaud/skyux2/issues/2382