Radio Strip Button Text is Selectable

[mperng]

Describe the Bug

Radio strip button text is selectable, which can result in a user occasionally seeing a selected button quickly pop from selected to unselected states.

Steps to Reproduce

Steps to reproduce the behavior:

1. Click and hold down on the text of a radio strip button.
2. Move the mouse left or right while holding the click.
3. Release the click.
4. See the radio strip button pop from selected to unselected state.

Expected behavior

The desired button is selected no matter how long the click was held down or if the mouse was moved while clicking.

Screenshots

Environment

Please complete the following information:

• Device: Laptop
• OS: MacOS
• Browser: Chrome, Firefox, Safari (untested on Windows browsers)
• Version: Chrome 72.0.3, Firefox 60.5.2, Safari 12.0.3

Additional Context

Add any other context about the problem here.

[CITguy]

This is a valid bug.

Because we're using <label> elements to activate radio <input> elements, the browser doesn't select the input unless it sees a mouseup event on the label, but the pressed styles (via the :active pseudo-class) trigger on mousedown. This is why we see it press but never select.

Unfortunately, using user-select: none to remove the ability to select the text won't change the behavior of the browser, so it will require a javascript solution in order to activate the radio when a mousedown event is heard on the <label>.

NOTE: Selector strips are slated for an overhaul as part of the form controls work. If you choose to implement a patch in your app, be aware that it will likely be incompatible with upcoming changes.