Skip to main content

This content has been archived and is no longer being updated. Links may not function; however, this content may be relevant to outdated versions of the product.

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

  1. Create Section A with a Tab-layout. 
  2. 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)
  3. Refer the Section B in Section A. 
  4. 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

Was this useful?

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.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us