Support Article
Button in repeat layout on refresh section has incorrect DOM id
SA-4057
Summary
UI controls (radio buttons and checkboxes) in repeating layout is meant to have incremental id to make it distinct for actions applied per row. However when user apply an onClick > refresh this section, the id does not recognize that it is in repeat layout. The id that is given in the refresh is no longer distinct. This affects the triggering of css styling. User's screen design is using 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
No error message. Observed an undesired behavior where when the radio buttons & check boxes are placed in repeating layouts, their styles are not getting applied to the actual elements instead they are propagated to the first element of its type.
Steps to Reproduce
1) Create a repeat dynamic layout which includes a section.
2) In the section, include radio buttons or check boxes. Add on click refresh this section event/action.
3) Run the flow and observed the DOM for the radio buttons and check boxes will have _1, _2 as a row index of the repeat layout.
4) Clicking the radio buttons / checkboxes (this will refresh the section). Now observe the id of their dom is no longer having _1 or _2 as the repeating index.
Root Cause
The root cause of this problem is a defect in Pegasystems’ code/rules. The radio buttons and checkbox and its respective label for id attributes are not unique. When refresh section happen, the dynamic repeat index from parent section is not passed to inner section. And inner section does not know the parent section is a repeat layout, so the index is not carried forward when generating the control's markup.
Resolution
This issue is resolved by hotfix item HFIX-10387 (for radio buttons) and HFIX-10425 (for checkboxes).
Published February 9, 2016 - Updated October 8, 2020
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.