SA-7380

Summary

Buttons in repeating layout is meant to have incremental IDs to make it distinct for actions applied per row. However, when a user applies an onClick > refresh this section, the ID does not recognize that it is in repeat layout.
The ID of the DOM that is given after the refresh is no longer distinct. This affects the triggering of CSS styling. User's screen design has CSS3 hover and focus styles. After a button's onClick then refresh section, the CSS styling is only applied to the first element.

Error Messages

Not Applicable

Steps to Reproduce

1. Create two identical radio button inside a repeating layout.
2. Hover on radio button and notice that the ID remains same and not unique.

Root Cause

The root cause of the issue is that in repeating layout, the field control's ID is not incremental, it points to the property name. The following code explains the root cause:-

On the first load, the value would be similar to below:
<div><span class="col-2"><input name="$PpyWorkPage$pSR119304PageGroup$gKey2$pTextTrueFalse" class="Radio" id="TextTrueFalsetrue_rdi_1" style="vertical-align: middle;" type="radio" value="true" data-click="..."><label title="" class="rb_ rb_standard radioLabel" for="TextTrueFalsetrue_rdi_1" data-hover="...">Yes</label></span><span class="col-2"><input name="$PpyWorkPage$pSR119304PageGroup$gKey2$pTextTrueFalse" class="Radio" id="TextTrueFalsefalse_rdi_1" style="vertical-align: middle;" type="radio" value="false" data-click="..."><label title="" class="rb_ rb_standard radioLabel" for="TextTrueFalsefalse_rdi_1" data-hover="...">No</label></span></div>
 
After the refresh section, the value would be similar to below:
<div><span class="col-2"><input name="$PpyWorkPage$pSR119304PageGroup$gKey2$pTextTrueFalse" class="Radio" id="TextTrueFalsetrue" style="vertical-align: middle;" type="radio" checked="" value="true" data-click="..."><label title="" class="rb_ rb_standard radioLabel" for="TextTrueFalsetrue" data-hover="...">Yes</label></span><span class="col-2"><input name="$PpyWorkPage$pSR119304PageGroup$gKey2$pTextTrueFalse" class="Radio" id="TextTrueFalsefalse" style="vertical-align: middle;" type="radio" value="false" data-click="..."><label title="" class="rb_ rb_standard radioLabel" for="TextTrueFalsefalse" data-hover="...">No</label></span></div>

Note that before the section refresh it has rdi_1 in the ID and afterwards it disappears.

Resolution

Apply HFix-21289.