Support Article
Focus shifts to top section on section refresh in tabbed layout
SA-31738
Summary
Refresh event from a button control forces the focus to the top of the section. Nothing is reported on logs or tracer. The issue is present in Internet Explorer 9 and 11, and Chrome 54.X.
Error Messages
Not Applicable
Steps to Reproduce
- Create Section A with a Tab-layout.
- Create Section B with a Button control. Configure two actions on this button for On-click event: Refresh this Section and Refresh Other Section (Section A)
- Refer the Section B in Section A.
- Refer Section A in a flow, and create a case. Click the Button > Section gets automatically scrolled up.
Root Cause
The focus shifts to the tab group. This is an expected behaviour, but the scrolling is the bug.
Resolution
Perform the following local-change:
Include the script given below in UserWorkForm. <script>
$(document).ready(function() {
if(pega && pega.u && pega.u.d && pega.u.d.initializeTabs) {
pega.u.d.initializeTabs = function() {
debugger;
var tabsList = pega.util.Dom.getElementsById("PEGA_TABBED");
if (tabsList == null)
return;
if (tabsList != null) {
var leftUnitDiv = document.getElementById("PEGA_LU_L");
if (leftUnitDiv && !pega.util.Event.isIE) {
var tabLeft = pega.util.Dom.getElementsById("PEGA_TABBED", leftUnitDiv, "DIV");
if (tabLeft && tabLeft.length > 0) {
tabLeft = tabLeft[0];
var tabContDiv = tabLeft.getElementsByClassName("tabContent", "DIV") ? tabLeft.getElementsByClassName("tabContent", "DIV")[0] : null;
if (tabContDiv) {
tabContDiv.style.width = tabContDiv.scrollWidth + "px";
}
}
}
var tabsListLen = tabsList.length;
for (var i = 0; i < tabsListLen; i++, pega.u.d.tabViewIndex++) {
if (pega.util.Dom.hasClass(tabsList[i], "with-fixed-header")) {
pega.util.Dom.addClass(document.body, "with-fixed-header");
}
pega.u.d.tabsLen.push(pega.u.d.tabViewIndex);
tabsList[i].id = "PEGA_TABBED" + pega.u.d.tabViewIndex;
if (!pega.u.d.tabViewMap) {
pega.u.d.tabViewMap = {};
}
if (!pega.u.d.modalTabViewMap) {
pega.u.d.modalTabViewMap = {};
}
var tabIndexWithError = pega.u.d.markSectionTabErrors(tabsList[i]);
var top = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
//var scrollx = window.scrollX;
//var scrolly = window.scrollY;
var tabView = new pega.ui.TabView(tabsList[i]);
pega.u.d.setTabsContentAndContainerID(tabView, tabsList[i].getAttribute("defaultTab"));
pega.u.d.tabViewMap["PEGA_TABBED" + pega.u.d.tabViewIndex] = tabView;
var defaultIndex = tabsList[i].getAttribute("defaultTab");
/*trimming possible spaces in older browsers*/
if (!String.prototype.trim) {
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, '');
}
}
defaultIndex = defaultIndex.trim(); //trim spaces in the response value
var myActiveIndex = tabsList[i].getAttribute("activeWhenTab");
if (myActiveIndex && myActiveIndex != "") {
defaultIndex = myActiveIndex;
}
if (pega.u.d.bModalDialogOpen) {
pega.u.d.modalTabViewMap["PEGA_TABBED" + pega.u.d.tabViewIndex] = tabView;
}
var index = 0;
if (tabIndexWithError == "-1") {
var tabHeaders = tabsList[i].getElementsByTagName("li");
//For scroll tabs correction. Scrollers are inside ol so discount them from entire headers list
var tabElements = [];
for (var j = 0; j < tabHeaders.length; j++) {
if (tabHeaders[j].parentNode.tagName.toLowerCase() != "ol") {
tabElements.push(tabHeaders[j]);
}
}
if (pega.u.d.bModalDialogOpen) {
pega.u.d.modalTabElementsWidth = pega.u.d.TAB_ELE_WIDTH_ADJUSTMENT;
}
var bSetIndex = true;
for (var j = 0; j < tabElements.length; j++) {
var ele = tabElements[j];
if (ele.id == "Tab" + defaultIndex && bSetIndex) {
index = j;
bSetIndex = false;
}
if (pega.u.d.bModalDialogOpen && ele.id.indexOf("Tab") >= 0) { /*This varible is used while resizing the modal dialog */
var tabElementWidth = parseInt(tabElements[j].scrollWidth);
if (tabElementWidth == 0) {
tabElementWidth = pega.u.d.TAB_ELE_WIDTH_ADJUSTMENT;
}
pega.u.d.modalTabElementsWidth += tabElementWidth;
}
}
} else {
index = tabIndexWithError;
}
//Last element should be disabled. It represents the right border and does not have a content div
var tabsArr = tabView.get("tabs");
if(tabsArr.length > 0) { // BUG-146344 - Check for the tab array length before processing further
//Label updation for static & static nested tabs case. JAINB1
var label = "";
for (var k = 0; k < tabsArr.length; k++) {
curTabEle = tabsArr[k].get("element");
label = tabView.getTabLabelIconAndTooltip(curTabEle).label;
if (label)
tabsArr[k].label = label;
if (curTabEle.getAttribute("isADynamicContainer") != "true" && curTabEle.id != "") {
pega.util.Event.addListener(curTabEle, "keydown", pega.u.d.tabAccessibilityHandler);
pega.util.Event.addListener(curTabEle, "keyup", pega.u.d.tabAccessibilityHandler);
}
}
pega.u.d.setAriaAttributes(tabView, false);
var lastTab = tabsArr[tabsArr.length - 1];
var lastTabElement = lastTab.get("element");
// BUG-71379 05/22/2012 GUJAS1 Rightborder Tab needs to be disabled in all browsers.
//if(pega.util.Dom.hasClass(lastTabElement, "rightborder") && !pega.util.Event.isIE) {
if (pega.util.Dom.hasClass(lastTabElement, "rightborder")) {
//BUG- removing call to fixLastTab, becuase it adds an inline height which causes misalignment
//pega.u.d.fixLastTab(lastTabElement, tabsList[i]); /* Sets the style properties of the last dummy tab element */
// BUG-70936 05/18/2012 GUJAS1 Moved right border tab disabling code in this condition.
lastTab.set('disabled', true);
// BUG-71379 05/22/2012 GUJAS1 Set the disabled last tab cursor as "default"
lastTabElement.style.cursor = "default";
}
// BUG-70936 05/18/2012 GUJAS1 Moved right border tab disabling code in the above condition.
// Keeping the logic below is incorrect since #1. Only right border tab needs disabling &
// #2. The below condition doesn't account for custom format tabs.
/*
if(!pega.util.Dom.hasClass(tabsList[i], "verticalTabs") && !pega.util.Dom.hasClass(tabsList[i], "stretchedTabs") && !pega.util.Dom.hasClass(tabsList[i], "subTabbed-b") && !pega.util.Dom.hasClass(tabsList[i], "headerTabbed-b")) {
lastTab.set('disabled', true);
}
*/
var argtmp = {
tabGrpDiv: tabsList[i],
tabGrp: tabView,
secType: "tabbed"
};
if (pega.u.d.harnessInit) {
argtmp.focusElement = pega.u.d.initFocusOnFirstInput;
}
tabView.on('activeTabChange', pega.u.d.setActiveTabIndex, argtmp);
tabView.on('activeTabChange', pega.u.d.fixTabs, argtmp);
tabView.on('activeTabChange', pega.u.d.onActivate);
tabView.on('tabRemoved', pega.u.d.tabRemoved);
tabView.on('tabAdded', pega.u.d.tabAdded);
//tabView.set('activeIndex', index);
try {
tabView.set('activeIndex', index);
} catch (E) {
tabView.set('activeIndex', 0);
}
if (tabIndexWithError == "-1"){
window.scrollTo(0,top);
}
}
}
if (pega.u.d.fixTabsClosure)
pega.u.d.fixTabsClosure = null;
pega.u.d.fixTabsClosure = function() {
for (var tabid in pega.u.d.tabViewMap) {
var tabgrp = pega.u.d.tabViewMap[tabid];
pega.u.d.fixTabs(null, {
tabGrpDiv: tabgrp.get('element'),
tabGrp: tabgrp,
secType: "tabbed"
});
}
};
pega.u.d.registerResize(pega.u.d.fixTabsClosure);
}
}
}
});
</script>
Published January 11, 2017 - 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.