Support Article

Double clicking a link causes the screen to hang

SA-42252

Summary

A link is configured to perform the finish assignment action on a single click. Using Chrome as the browser, if the user double clicks the link, the screen hangs with the throbber remaining indefinitely.

Error Messages

Not Applicable

Steps to Reproduce

Add a link containing one single click event containing one action that performs finish assignment. The link should be added on a section within the flow action.
Run the flow using Chrome as the browser.
Double click the link.

Root Cause

Although the user double clicked, the first click activated the link, and the second click is provoking the issue.

Resolution

Make the following two edits. The first edit is to the link to insert an additional script action before the finish assignment action. The inserted action invokes a function defined in the second edit. The second edit is to define the javascript function in the UserWorkForm rule.

The edits refer to the set of snapshots shown below.

The first edit, performed on the settings for the link within the section rule:

Copy the Test ID, shown in Snapshot 1.
Insert a script action before the finish assignment action to call a javascript function called singleClick. Pass in the Test ID copied in step 1. This inserted script action is shown in Snapshot 2.

The second edit is to add the singleClick function in the UserWorkForm rule. This function is designed to consume the second click, such that the screen will not hang on the Chrome browser when the user double clicks instead of single clicking the link.

Here are the steps for the second edit:

Copy the UserWorkForm rule from its Pega ruleset into an appropriate application ruleset.
Copy the entire script, including the beginning script tag, the singleClick function, and the ending script tag, from Snapshot 3 below..
Paste the script into the UserWorkForm rule and save the rule.

Snapshot 1:

Snapshot 2:

Snapshot 3:

<script>
singleClick = function(theButtonID) {

var buttonID = "[data-test-id= " + theButtonID + "]";

var theButtonObject = $(document).find(buttonID);
if (theButtonObject != null) {
if (true != theButtonObject.prop("disabled")) {
theButtonObject.css("pointer-events","none");
theButtonObject.css("cursor","default");
}
else {
pega.control.actionSequencer.clearQueue();
}
}

}

;
</script>