Support Article

Cannot select radio buttons with tool tip when error msg occurs

SA-29880

Summary



Cannot select radio buttons when there is a page set message on the screen. Cursor focus moved to the top of the screen. Tool tip also configured on the radio button. When tool tip is removed functionality is working fine. This behavior happens only when there is a error message on the screen.

Basically when user takes the mouse pointer near the radio buttons, mouse pointer would just jump to the top of the page. Can’t select the radio buttons. Tested this scenario in different browsers and following are the results. Property selection issue only occurs in IE.

a. Chrome – User can click on the property, but still the mouse pointer jumps to the top of the page.
b. IE – Above mentioned issue occurs and cannot select the property anyway.


Error Messages



Not Applicable 


Steps to Reproduce

  1. Create a Repeat grid with expand pane
  2. In expand pane content should have a radio button with tool tip
  3. Configure two validate the radio buttons to get page level error message
  4. When error message appears on the screen, try to change the the radio button option


Root Cause



A defect in Pegasystems’ code or rules: The problem is from accessability. By considering the accessability, when ever there is a error message, focus must shift to the top of the screen to show/read the error message. In the current scenario, there was no such conditional validation done.

Resolution



Perform the following local-change:
  1. Open the rule "UserWorkForm"
  2. Do a save as of the rule into your application rule set
  3. Place the following code snippet and save the UserWorkForm rule

Code Snippet:

<script>
$(document).ready(function() {
  if(pega && pega.u && pega.u.d && pega.u.d.defaultErrorDivInit) {
    pega.u.d.defaultErrorDivInit = function(errorText) {
    var errorDiv = document.createElement("DIV");
  errorDiv.innerHTML = errorText;
  var errorDiv2 = document.createElement("DIV");
  errorDiv2.innerHTML = errorText;

  var errorTables = pega.util.Dom.getElementsById("ERRORTABLE", document);
  if (errorTables) {

    for (var t = 0; t < errorTables.length; t++) {
      pega.util.Dom.setStyle(errorTables[t], "display", "block");
      var errorSpan = pega.util.Dom.getElementsById("ERRORMESSAGES_ALL", errorTables[t]);
      if (errorSpan && errorSpan.length > 0) {
        var msgSpan = pega.util.Dom.getElementsById("ERRORMESSAGES_ALL", errorDiv);
        if (msgSpan && msgSpan.length > 0) {
          errorSpan[0].innerHTML = msgSpan[0].innerHTML;
        } else {
          errorSpan[0].innerHTML = errorText;

                  }
              }
          }
      }

  else if (document.getElementById("PEGA_HARNESS") != null) {

    var isPageViewHarness = $( "#HARNESS_CONTENT" ).hasClass( "harness-content-page-view" );
    var errorDivContainerDiv = isPageViewHarness ? "HARNESS_CONTENT":"PEGA_HARNESS";
    document.getElementById(errorDivContainerDiv).insertBefore(errorDiv, document.getElementById(errorDivContainerDiv).firstChild);
    if (pega.u.d.formErrorType != "FLOAT") {
      document.getElementById(errorDivContainerDiv).appendChild(errorDiv2);
          }
    var errorTables = pega.util.Dom.getElementsById("ERRORTABLE", document);
    if (errorTables) {
      for (var t = 0; t < errorTables.length; t++) {
        pega.util.Dom.setStyle(errorTables[t], "display", "block");
              }
          }
      }

  else if (document.getElementById('FormErrorMarker_Div')) {
    formErrorMarkerdiv = document.getElementById('FormErrorMarker_Div');
    formErrorMarkerdiv.insertBefore(errorDiv, formErrorMarkerdiv.firstChild);
    formErrorMarkerdiv.style.display = "block";
    document.getElementById("ERRORTABLE").style.display = "block";
      }

  else if (document.getElementsByTagName("DIV")[0] != null) {
   
    document.getElementsByTagName("DIV")[0].insertBefore(errorDiv, document.getElementsByTagName("DIV")[0].firstChild);
    document.getElementsByTagName("DIV")[0].style.display = "block";
    document.getElementById("ERRORTABLE").style.display = "block";
      }
      if(pega.u.d.isAccessible) {
     
      var accessErrorTable=document.getElementById("ERRORTABLE");
      if(!pega.u.d.bModalDialogOpen && accessErrorTable && accessErrorTable.getAttribute("role")=="alert"){
        try {
          accessErrorTable.focus();
              }
        catch(e){}
          }

      }

    }
  }
});
</script>



 

 

Published November 2, 2016


0% found this useful

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.