Animated Label in a Tab

Animated Label in a Tab

  

Just using and enjoying new Outsystems 11 features. However, I cannot effectively use an animated label in a Tab Content Area (The space bar and left/right keys don't function). If I move the animated label away from the Tab then it works perfectly. 

Any ideas?

Andy.


I can confirm that this occurs when creating a new responsive blank app from Outsystems 11.0.113 and then creating a new "Empty" screen. I put a Navigation\Tabs on the form and two animated labels. One outside of the tab and another inside the first tab detail. The one outside functions perfectly, the one in the tab detail doesn't allow cursor movement or entering a space.

Any help gratefully received.

Andy.


I have investigated further, and I think I know the problem. The Tabs UI has the following code in the onkeypress changing the arrow keys and also the space key. Q. How do I change this behavior. I'm kinda new to javascript - Any help gratefully received

var onTabsKeypress = function(e)
    {
        var nextTabItem = document.activeElement; // set active as default
        var tabsHeaderItems = tabs.querySelectorAll('.tabs-header-item');
        var items = tabsHeaderItems.length;
        if(tabs.classList.contains('tabs-horizontal')) {
            // Arrow Right
            if(e.keyCode == "39") {
                nextTabItem = document.activeElement.nextElementSibling;
                if(!nextTabItem) {
                    nextTabItem = tabsHeaderItems[0];
                    nextTabItem.focus();
                }
                else {
                    nextTabItem.focus();
                }
            }
            // Arrow Left
            if(e.keyCode == "37") {
                nextTabItem = document.activeElement.previousElementSibling;
                if(!nextTabItem) {
                    nextTabItem = tabsHeaderItems[items - 1];
                    nextTabItem.focus();
                }
                else {
                    nextTabItem.focus();
                }
            }
        }
        if(tabs.classList.contains('tabs-vertical')) {
            // Arrow Down - Act as Right
            if(e.keyCode == "40") {
                nextTabItem = document.activeElement.nextElementSibling;
                if(!nextTabItem) {
                    nextTabItem = tabsHeaderItems[0];
                    nextTabItem.focus();
                }
                else {
                    nextTabItem.focus();
                }
                e.preventDefault();
            }
            // Arrow Up - Act as Left
            if(e.keyCode == "38") {
                nextTabItem = document.activeElement.previousElementSibling;
                if(!nextTabItem) {
                    nextTabItem = tabsHeaderItems[items - 1];
                    nextTabItem.focus();
                }
                else {
                    nextTabItem.focus();
                }
                e.preventDefault();
            }
        }
        if(e.keyCode == "32") {
            nextTabItem.click();
            e.preventDefault();
        }
    };