A few days ago I've managed to produce a very weird bug that was hard to figure out. Thankfully, it was only in a demo application. I hope this blog post will help somebody to fix it a bit faster.
If you take a closer look at input and label HTML tags of radio buttons you can see how APEX is generating the ID and FOR HTML attributes: item name + underscore + sequence (starting from 1). In my case, "Accounting" label had FOR attribute that was equal to the ID of a duplicated item (P58_RADIO_1) and that didn't allow me to click on it.
The problem...
...was that I couldn't click on the second radio group item with label "Accounting".
How I did it
I've created two radio group items. The first one that I've created was P58_RADIO (with label "Radio Group") and the second one was a duplicate of the first one so it was automatically named P58_RADIO_1. After that, I've moved that item before P58_RADIO and suddenly I couldn't click on "Accounting" label of the second radio group item (as shown above).
The problem is how APEX internal engine renders radio group items. This is the code for the radio item named P58_RADIO:
The problem is how APEX internal engine renders radio group items. This is the code for the radio item named P58_RADIO:
If you take a closer look at input and label HTML tags of radio buttons you can see how APEX is generating the ID and FOR HTML attributes: item name + underscore + sequence (starting from 1). In my case, "Accounting" label had FOR attribute that was equal to the ID of a duplicated item (P58_RADIO_1) and that didn't allow me to click on it.
How to fix it
I don't expect from APEX team to change the way how radio items are rendered so just be careful how you're naming your page items.
CSS fix for Null Display Value
Also, in APEX 18.2.0.00.12 (and probably in some lower version), there's a UI bug with horizontal radio group items where property "Display Null Value" is turned on. The display value for null values is displayed in a row before other radio group item values. To fix it, use the following CSS:
Enjoy!
Tested in APEX 18.2.0.00.12.
