There is a nasty bug in XPages with radio buttons and a partial refresh in the onClick event if the user clicks on the label instead of radio itself.

For a short moment the change in the state of the radio button is visible and then directly afterwards the original state is shown after the partial refresh kicks in. We have prepared a little video to show the effect.

The reason for this effect is timing. When the user clicks on the label the post command is issued for the partial refresh. At that moment the attribute change of the radio button is not through. So the old value is transmitted within the post. This is the reason that after the partial refresh magically the original state is shown.

IBM is aware of the bug: LO71073: XPAGES RADIOBUTTON CLICK ON LABEL UNDONE BY PARTIAL REFRESH. The current state is: "This APAR is closed as FIN. We have deferred the fix to a future release." I like that IBM explains the acronym FIN after using it.

So until this bug is fixed from IBM we can fix it ourselves with a little help from dojo.

The following code has to be placed in the client side JavaScript onClick event.

var e = arguments[0] || window.event;
e = dojo.fixEvent(e);
if (e.target.type != "radio") {
 e.preventDefault();
 dojo.query("input",e.target).forEach(function(inputNode){
 dojo.attr(inputNode,"checked",!(dojo.attr(inputNode,"checked")));
 });
}
return true;

First we assign the event to the variable e. With dojo.fixEvent(e) we take care of the slightly different event handling in IE.

In case a user clicks on the label (e.target.type != "radio"), we stop the default event handling (e.preventDefault()). After that we change the attribute of the input element to checked.

The dojo.query works because the XPages runtime generates the HTML like this:

<label>
 <input type="radio" value="Banana" name="view:_id1:radioGroup1">Banana
</label>

The input element is a child element to the label element. With dojo.query("input", e.target) dojo searchs for all input elements underneath the element that triggered the event. In our case the label element.

Btw always use the onClick event with radio buttons and check boxes. The IE browser generally has a timing problem with the onChange event. The attribute changes are only visible after the onChange event has been fired.