@syncfusion/ej2-navigations 20.3.58 → 20.4.38

package/src/toolbar/toolbar.js

@@ -127,6 +127,9 @@ var Item = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], Item.prototype, "click", void 0);
+    __decorate([
+        Property(-1)
+    ], Item.prototype, "tabIndex", void 0);
     return Item;
 }(ChildProperty));
 export { Item };
@@ -213,7 +216,7 @@ var Toolbar = /** @class */ (function (_super) {
             removeClass([this.element], this.cssClass.split(' '));
         }
         this.element.removeAttribute('style');
-        ['aria-disabled', 'aria-orientation', 'aria-haspopup', 'role'].forEach(function (attrb) {
+        ['aria-disabled', 'aria-orientation', 'role'].forEach(function (attrb) {
             return _this.element.removeAttribute(attrb);
         });
         _super.prototype.destroy.call(this);
@@ -253,7 +256,16 @@ var Toolbar = /** @class */ (function (_super) {
             keyConfigs: this.keyConfigs
         });
         EventHandler.add(this.element, 'keydown', this.docKeyDown, this);
-        this.element.setAttribute('tabIndex', '0');
+        this.updateTabIndex('0');
+    };
+    Toolbar.prototype.updateTabIndex = function (tabIndex) {
+        var ele = this.element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_DISABLE + ' ):not(.' + CLS_SEPARATOR + ' ):not(.' + CLS_HIDDEN + ' )');
+        if (!isNOU(ele) && !isNOU(ele.firstElementChild)) {
+            var dataTabIndex = ele.firstElementChild.getAttribute('data-tabindex');
+            if (dataTabIndex && dataTabIndex === '-1' && ele.firstElementChild.tagName !== 'INPUT') {
+                ele.firstElementChild.setAttribute('tabindex', tabIndex);
+            }
+        }
     };
     Toolbar.prototype.unwireKeyboardEvent = function () {
         if (this.keyModule) {
@@ -457,7 +469,6 @@ var Toolbar = /** @class */ (function (_super) {
                             this.activeEleRemove(ele_1);
                             ele_1.focus();
                         }
-                        this.element.removeAttribute('tabindex');
                     }
                 }
                 break;
@@ -508,9 +519,8 @@ var Toolbar = /** @class */ (function (_super) {
         else {
             rootEle.classList.remove(CLS_DISABLE);
         }
-        rootEle.setAttribute('tabindex', !value ? '0' : '-1');
         if (this.activeEle) {
-            this.activeEle.setAttribute('tabindex', !value ? '0' : '-1');
+            this.activeEle.setAttribute('tabindex', this.activeEle.getAttribute('data-tabindex'));
         }
         if (this.scrollModule) {
             this.scrollModule.disable(value);
@@ -647,7 +657,7 @@ var Toolbar = /** @class */ (function (_super) {
         }
         setStyle(this.element, { 'width': width });
         var ariaAttr = {
-            'role': 'toolbar', 'aria-disabled': 'false', 'aria-haspopup': 'false',
+            'role': 'toolbar', 'aria-disabled': 'false',
             'aria-orientation': !this.isVertical ? 'horizontal' : 'vertical'
         };
         attributes(this.element, ariaAttr);
@@ -679,17 +689,17 @@ var Toolbar = /** @class */ (function (_super) {
             this.tbarEle = [];
         }
         for (var i = 0; i < items.length; i++) {
-            innerItem = this.renderSubComponent(items[i], i);
+            innerItem = this.renderSubComponent(items[parseInt(i.toString(), 10)], i);
             if (this.tbarEle.indexOf(innerItem) === -1) {
                 this.tbarEle.push(innerItem);
             }
             if (!this.tbarAlign) {
-                this.tbarItemAlign(items[i], itemEleDom, i);
+                this.tbarItemAlign(items[parseInt(i.toString(), 10)], itemEleDom, i);
             }
-            innerPos = itemEleDom.querySelector('.e-toolbar-' + items[i].align.toLowerCase());
+            innerPos = itemEleDom.querySelector('.e-toolbar-' + items[parseInt(i.toString(), 10)].align.toLowerCase());
             if (innerPos) {
-                if (!(items[i].showAlwaysInPopup && items[i].overflow !== 'Show')) {
-                    this.tbarAlgEle[(items[i].align + 's').toLowerCase()].push(innerItem);
+                if (!(items[parseInt(i.toString(), 10)].showAlwaysInPopup && items[parseInt(i.toString(), 10)].overflow !== 'Show')) {
+                    this.tbarAlgEle[(items[parseInt(i.toString(), 10)].align + 's').toLowerCase()].push(innerItem);
                 }
                 innerPos.appendChild(innerItem);
             }
@@ -699,7 +709,7 @@ var Toolbar = /** @class */ (function (_super) {
         }
         if (this.isReact) {
             var portals = 'portals';
-            this.notify('render-react-toolbar-template', this[portals]);
+            this.notify('render-react-toolbar-template', this["" + portals]);
             this.renderReactTemplates();
         }
     };
@@ -856,8 +866,11 @@ var Toolbar = /** @class */ (function (_super) {
     };
     Toolbar.prototype.setOverflowAttributes = function (ele) {
         this.createPopupEle(ele, [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, ele)));
-        this.element.querySelector('.' + CLS_TBARNAV).setAttribute('tabIndex', '0');
-        this.element.querySelector('.' + CLS_TBARNAV).setAttribute('role', 'list');
+        var ariaAttr = {
+            'tabindex': '0', 'role': 'button', 'aria-haspopup': 'true',
+            'aria-label': 'overflow'
+        };
+        attributes(this.element.querySelector('.' + CLS_TBARNAV), ariaAttr);
     };
     Toolbar.prototype.separator = function () {
         var element = this.element;
@@ -874,12 +887,12 @@ var Toolbar = /** @class */ (function (_super) {
             }
         }
         for (var i = 0; i <= eleItem.length - 1; i++) {
-            if (eleItem[i].offsetLeft < 30 && eleItem[i].offsetLeft !== 0) {
+            if (eleItem[parseInt(i.toString(), 10)].offsetLeft < 30 && eleItem[parseInt(i.toString(), 10)].offsetLeft !== 0) {
                 if (this.overflowMode === 'MultiRow') {
-                    eleItem[i].classList.add(CLS_MULTIROW_SEPARATOR);
+                    eleItem[parseInt(i.toString(), 10)].classList.add(CLS_MULTIROW_SEPARATOR);
                 }
                 else if (this.overflowMode === 'Extended') {
-                    eleItem[i].classList.add(CLS_EXTENDABLE_SEPARATOR);
+                    eleItem[parseInt(i.toString(), 10)].classList.add(CLS_EXTENDABLE_SEPARATOR);
                 }
             }
         }
@@ -912,7 +925,7 @@ var Toolbar = /** @class */ (function (_super) {
             nodes = selectAll('.' + CLS_TBAROVERFLOW, ele);
             if (el.classList.contains(CLS_TBAROVERFLOW) && nodes.length > 0) {
                 if (tbarObj.tbResize && nodes.length > index) {
-                    ele.insertBefore(el, nodes[index]);
+                    ele.insertBefore(el, nodes[parseInt(index.toString(), 10)]);
                     ++nodePri;
                 }
                 else {
@@ -950,7 +963,7 @@ var Toolbar = /** @class */ (function (_super) {
         });
         var tbarEle = selectAll('.' + CLS_ITEM, element.querySelector('.' + CLS_ITEMS));
         for (var i = tbarEle.length - 1; i >= 0; i--) {
-            var tbarElement = tbarEle[i];
+            var tbarElement = tbarEle[parseInt(i.toString(), 10)];
             if (tbarElement.classList.contains(CLS_SEPARATOR) && this.overflowMode !== 'Extended') {
                 setStyle(tbarElement, { display: 'none' });
             }
@@ -1005,11 +1018,11 @@ var Toolbar = /** @class */ (function (_super) {
                 collision: { Y: this.enableCollision ? 'flip' : 'none' },
                 position: this.enableRtl ? { X: 'left', Y: 'top' } : { X: 'right', Y: 'top' }
             });
-            popup.appendTo(ele);
             if (this.overflowMode === 'Extended') {
                 popup.width = parseFloat(eleStyles.width) + ((parseFloat(eleStyles.borderRightWidth)) * 2);
                 popup.offsetX = 0;
             }
+            popup.appendTo(ele);
             EventHandler.add(document, 'scroll', this.docEvent.bind(this));
             EventHandler.add(document, 'click ', this.docEvent.bind(this));
             popup.element.style.maxHeight = popup.element.offsetHeight + 'px';
@@ -1026,7 +1039,6 @@ var Toolbar = /** @class */ (function (_super) {
                 popup.hide();
             }
             this.popObj = popup;
-            this.element.setAttribute('aria-haspopup', 'true');
         }
         else {
             var popupEle = this.popObj.element;
@@ -1054,6 +1066,7 @@ var Toolbar = /** @class */ (function (_super) {
         var popupEle = this.popObj.element;
         var toolEle = this.popObj.element.parentElement;
         var popupNav = toolEle.querySelector('.' + CLS_TBARNAV);
+        popupNav.setAttribute('aria-expanded', 'true');
         setStyle(popObj.element, { height: 'auto', maxHeight: '' });
         popObj.element.style.maxHeight = popObj.element.offsetHeight + 'px';
         if (this.overflowMode === 'Extended') {
@@ -1069,7 +1082,7 @@ var Toolbar = /** @class */ (function (_super) {
             var overflowHeight = (popupEle.offsetHeight - ((popupElePos - window.innerHeight - scrollVal) + 5));
             popObj.height = overflowHeight + 'px';
             for (var i = 0; i <= popupEle.childElementCount; i++) {
-                var ele = popupEle.children[i];
+                var ele = popupEle.children[parseInt(i.toString(), 10)];
                 if (ele.offsetTop + ele.offsetHeight > overflowHeight) {
                     overflowHeight = ele.offsetTop;
                     break;
@@ -1094,6 +1107,7 @@ var Toolbar = /** @class */ (function (_super) {
     Toolbar.prototype.popupClose = function (e) {
         var element = this.element;
         var popupNav = element.querySelector('.' + CLS_TBARNAV);
+        popupNav.setAttribute('aria-expanded', 'false');
         var popIcon = popupNav.firstElementChild;
         popupNav.classList.remove(CLS_TBARNAVACT);
         classList(popIcon, [CLS_POPUPDOWN], [CLS_POPUPICON]);
@@ -1119,7 +1133,7 @@ var Toolbar = /** @class */ (function (_super) {
         };
         for (var i = len - 1; i >= 0; i--) {
             var mrgn = void 0;
-            var compuStyle = window.getComputedStyle(inEle[i]);
+            var compuStyle = window.getComputedStyle(inEle[parseInt(i.toString(), 10)]);
             if (this.isVertical) {
                 mrgn = parseFloat((compuStyle).marginTop);
                 mrgn += parseFloat((compuStyle).marginBottom);
@@ -1128,35 +1142,37 @@ var Toolbar = /** @class */ (function (_super) {
                 mrgn = parseFloat((compuStyle).marginRight);
                 mrgn += parseFloat((compuStyle).marginLeft);
             }
-            var fstEleCheck = inEle[i] === this.tbarEle[0];
+            var fstEleCheck = inEle[parseInt(i.toString(), 10)] === this.tbarEle[0];
             if (fstEleCheck) {
                 this.tbarEleMrgn = mrgn;
             }
-            eleOffset = this.isVertical ? inEle[i].offsetHeight : inEle[i].offsetWidth;
+            eleOffset = this.isVertical ? inEle[parseInt(i.toString(), 10)].offsetHeight : inEle[parseInt(i.toString(), 10)].offsetWidth;
             var eleWid_1 = fstEleCheck ? (eleOffset + mrgn) : eleOffset;
-            if (checkClass(inEle[i], [CLS_POPPRI]) && popPriority) {
-                inEle[i].classList.add(CLS_POPUP);
+            if (checkClass(inEle[parseInt(i.toString(), 10)], [CLS_POPPRI]) && popPriority) {
+                inEle[parseInt(i.toString(), 10)].classList.add(CLS_POPUP);
                 if (this.isVertical) {
-                    setStyle(inEle[i], { display: 'none', minHeight: eleWid_1 + 'px' });
+                    setStyle(inEle[parseInt(i.toString(), 10)], { display: 'none', minHeight: eleWid_1 + 'px' });
                 }
                 else {
-                    setStyle(inEle[i], { display: 'none', minWidth: eleWid_1 + 'px' });
+                    setStyle(inEle[parseInt(i.toString(), 10)], { display: 'none', minWidth: eleWid_1 + 'px' });
                 }
                 itemPopCount++;
             }
             if (this.isVertical) {
-                checkoffset = (inEle[i].offsetTop + inEle[i].offsetHeight + mrgn) > eleWidth;
+                checkoffset =
+                    (inEle[parseInt(i.toString(), 10)].offsetTop + inEle[parseInt(i.toString(), 10)].offsetHeight + mrgn) > eleWidth;
             }
             else {
-                checkoffset = (inEle[i].offsetLeft + inEle[i].offsetWidth + mrgn) > eleWidth;
+                checkoffset =
+                    (inEle[parseInt(i.toString(), 10)].offsetLeft + inEle[parseInt(i.toString(), 10)].offsetWidth + mrgn) > eleWidth;
             }
             if (checkoffset) {
-                if (inEle[i].classList.contains(CLS_SEPARATOR)) {
+                if (inEle[parseInt(i.toString(), 10)].classList.contains(CLS_SEPARATOR)) {
                     if (this.overflowMode === 'Extended') {
                         if (itemCount === itemPopCount) {
-                            var sepEle = inEle[i];
+                            var sepEle = inEle[parseInt(i.toString(), 10)];
                             if (checkClass(sepEle, [CLS_SEPARATOR, CLS_TBARIGNORE])) {
-                                inEle[i].classList.add(CLS_POPUP);
+                                inEle[parseInt(i.toString(), 10)].classList.add(CLS_POPUP);
                                 itemPopCount++;
                             }
                         }
@@ -1177,21 +1193,23 @@ var Toolbar = /** @class */ (function (_super) {
                 else {
                     itemCount++;
                 }
-                if (inEle[i].classList.contains(CLS_TBAROVERFLOW) && pre) {
-                    eleWidth -= ((this.isVertical ? inEle[i].offsetHeight : inEle[i].offsetWidth) + (mrgn));
+                if (inEle[parseInt(i.toString(), 10)].classList.contains(CLS_TBAROVERFLOW) && pre) {
+                    eleWidth -= ((this.isVertical ? inEle[parseInt(i.toString(), 10)].offsetHeight :
+                        inEle[parseInt(i.toString(), 10)].offsetWidth) + (mrgn));
                 }
-                else if (!checkClass(inEle[i], [CLS_SEPARATOR, CLS_TBARIGNORE])) {
-                    inEle[i].classList.add(CLS_POPUP);
+                else if (!checkClass(inEle[parseInt(i.toString(), 10)], [CLS_SEPARATOR, CLS_TBARIGNORE])) {
+                    inEle[parseInt(i.toString(), 10)].classList.add(CLS_POPUP);
                     if (this.isVertical) {
-                        setStyle(inEle[i], { display: 'none', minHeight: eleWid_1 + 'px' });
+                        setStyle(inEle[parseInt(i.toString(), 10)], { display: 'none', minHeight: eleWid_1 + 'px' });
                     }
                     else {
-                        setStyle(inEle[i], { display: 'none', minWidth: eleWid_1 + 'px' });
+                        setStyle(inEle[parseInt(i.toString(), 10)], { display: 'none', minWidth: eleWid_1 + 'px' });
                     }
                     itemPopCount++;
                 }
                 else {
-                    eleWidth -= ((this.isVertical ? inEle[i].offsetHeight : inEle[i].offsetWidth) + (mrgn));
+                    eleWidth -= ((this.isVertical ? inEle[parseInt(i.toString(), 10)].offsetHeight :
+                        inEle[parseInt(i.toString(), 10)].offsetWidth) + (mrgn));
                 }
             }
         }
@@ -1211,7 +1229,7 @@ var Toolbar = /** @class */ (function (_super) {
         var navItem = this.createElement('div', { className: CLS_POPUPDOWN + ' e-icons' });
         nav.appendChild(navItem);
         nav.setAttribute('tabindex', '0');
-        nav.setAttribute('role', 'list');
+        nav.setAttribute('role', 'button');
         element.appendChild(nav);
     };
     Toolbar.prototype.tbarPriRef = function (inEle, indx, sepPri, el, des, elWid, wid, ig) {
@@ -1285,7 +1303,6 @@ var Toolbar = /** @class */ (function (_super) {
             this.popObj.destroy();
             detach(this.popObj.element);
             this.popObj = null;
-            ele.setAttribute('aria-haspopup', 'false');
         }
     };
     Toolbar.prototype.ignoreEleFetch = function (index, innerEle) {
@@ -1364,7 +1381,7 @@ var Toolbar = /** @class */ (function (_super) {
                 }
                 index = this_1.tbarEle.indexOf(el);
                 if (this_1.tbarAlign) {
-                    var pos = this_1.items[index].align;
+                    var pos = this_1.items[parseInt(index.toString(), 10)].align;
                     index = this_1.tbarAlgEle[(pos + 's').toLowerCase()].indexOf(el);
                     eleSplice = this_1.tbarAlgEle[(pos + 's').toLowerCase()];
                     innerEle = this_1.element.querySelector('.' + CLS_ITEMS + ' .' + 'e-toolbar-' + pos.toLowerCase());
@@ -1560,12 +1577,12 @@ var Toolbar = /** @class */ (function (_super) {
         var key = Object.keys(attr);
         var keyVal;
         for (var i = 0; i < key.length; i++) {
-            keyVal = key[i];
+            keyVal = key[parseInt(i.toString(), 10)];
             if (keyVal === 'class') {
-                this.add(element, attr[keyVal]);
+                this.add(element, attr["" + keyVal]);
             }
             else {
-                element.setAttribute(keyVal, attr[keyVal]);
+                element.setAttribute(keyVal, attr["" + keyVal]);
             }
         }
     };
@@ -1596,14 +1613,14 @@ var Toolbar = /** @class */ (function (_super) {
         };
         if (!isNOU(len) && len >= 1) {
             for (var a = 0, element = [].slice.call(elements); a < len; a++) {
-                var itemElement = element[a];
+                var itemElement = element[parseInt(a.toString(), 10)];
                 if (typeof (itemElement) === 'number') {
                     ele = this.getElementByIndex(itemElement);
                     if (isNOU(ele)) {
                         return;
                     }
                     else {
-                        elements[a] = ele;
+                        elements[parseInt(a.toString(), 10)] = ele;
                     }
                 }
                 else {
@@ -1632,8 +1649,8 @@ var Toolbar = /** @class */ (function (_super) {
         }
     };
     Toolbar.prototype.getElementByIndex = function (index) {
-        if (this.tbarEle[index]) {
-            return this.tbarEle[index];
+        if (this.tbarEle[parseInt(index.toString(), 10)]) {
+            return this.tbarEle[parseInt(index.toString(), 10)];
         }
         return null;
     };
@@ -1679,14 +1696,14 @@ var Toolbar = /** @class */ (function (_super) {
                 if (!this.tbarAlign && itemAgn !== 'Left') {
                     this.tbarItemAlign(item, itemsDiv, 1);
                     this.tbarAlign = true;
-                    ele = closest(innerItems[0], '.' + CLS_ITEMS).children[algIndex];
+                    ele = closest(innerItems[0], '.' + CLS_ITEMS).children[parseInt(algIndex.toString(), 10)];
                     ele.appendChild(innerEle);
                     this.tbarAlgEle[(item.align + 's').toLowerCase()].push(innerEle);
                     this.refreshPositioning();
                 }
                 else if (this.tbarAlign) {
-                    ele = closest(innerItems[0], '.' + CLS_ITEMS).children[algIndex];
-                    ele.insertBefore(innerEle, ele.children[index]);
+                    ele = closest(innerItems[0], '.' + CLS_ITEMS).children[parseInt(algIndex.toString(), 10)];
+                    ele.insertBefore(innerEle, ele.children[parseInt(index.toString(), 10)]);
                     this.tbarAlgEle[(item.align + 's').toLowerCase()].splice(index, 0, innerEle);
                     this.refreshPositioning();
                 }
@@ -1695,7 +1712,7 @@ var Toolbar = /** @class */ (function (_super) {
                     innerItems[0].appendChild(innerEle);
                 }
                 else {
-                    innerItems[0].parentNode.insertBefore(innerEle, innerItems[index]);
+                    innerItems[0].parentNode.insertBefore(innerEle, innerItems[parseInt(index.toString(), 10)]);
                 }
                 this.items.splice(index, 0, item);
                 if (item.template) {
@@ -1745,20 +1762,20 @@ var Toolbar = /** @class */ (function (_super) {
         this.resize();
     };
     Toolbar.prototype.removeItemByIndex = function (index, innerItems) {
-        if (this.tbarEle[index] && innerItems[index]) {
-            var eleIdx = this.tbarEle.indexOf(innerItems[index]);
+        if (this.tbarEle[parseInt(index.toString(), 10)] && innerItems[parseInt(index.toString(), 10)]) {
+            var eleIdx = this.tbarEle.indexOf(innerItems[parseInt(index.toString(), 10)]);
             if (this.tbarAlign) {
-                var indexAgn = this.tbarAlgEle[(this.items[eleIdx].align + 's').toLowerCase()].indexOf(this.tbarEle[eleIdx]);
-                this.tbarAlgEle[(this.items[eleIdx].align + 's').toLowerCase()].splice(indexAgn, 1);
+                var indexAgn = this.tbarAlgEle[(this.items[parseInt(eleIdx.toString(), 10)].align + 's').toLowerCase()].indexOf(this.tbarEle[parseInt(eleIdx.toString(), 10)]);
+                this.tbarAlgEle[(this.items[parseInt(eleIdx.toString(), 10)].align + 's').toLowerCase()].splice(parseInt(indexAgn.toString(), 10), 1);
             }
             if (this.isReact) {
                 this.clearTemplate();
             }
-            var btnItem = innerItems[index].querySelector('.e-control.e-btn');
+            var btnItem = innerItems[parseInt(index.toString(), 10)].querySelector('.e-control.e-btn');
             if (!isNOU(btnItem) && !isNOU(btnItem.ej2_instances[0]) && !(btnItem.ej2_instances[0].isDestroyed)) {
                 btnItem.ej2_instances[0].destroy();
             }
-            detach(innerItems[index]);
+            detach(innerItems[parseInt(index.toString(), 10)]);
             this.items.splice(eleIdx, 1);
             this.tbarEle.splice(eleIdx, 1);
         }
@@ -1891,7 +1908,8 @@ var Toolbar = /** @class */ (function (_super) {
             switch (item.type) {
                 case 'Button':
                     dom = this.buttonRendering(item, innerEle);
-                    dom.setAttribute('tabindex', '-1');
+                    dom.setAttribute('tabindex', isNOU(item.tabIndex) ? '-1' : item.tabIndex.toString());
+                    dom.setAttribute('data-tabindex', isNOU(item.tabIndex) ? '-1' : item.tabIndex.toString());
                     dom.setAttribute('aria-label', (item.text || item.tooltipText));
                     innerEle.appendChild(dom);
                     innerEle.addEventListener('click', this.itemClick.bind(this));
@@ -1934,6 +1952,9 @@ var Toolbar = /** @class */ (function (_super) {
         }
         return innerEle;
     };
+    Toolbar.prototype.getDataTabindex = function (ele) {
+        return isNOU(ele.getAttribute('data-tabindex')) ? '-1' : ele.getAttribute('data-tabindex');
+    };
     Toolbar.prototype.itemClick = function (e) {
         this.activeEleSwitch(e.currentTarget);
     };
@@ -1943,14 +1964,17 @@ var Toolbar = /** @class */ (function (_super) {
     };
     Toolbar.prototype.activeEleRemove = function (curEle) {
         if (!isNOU(this.activeEle)) {
-            this.activeEle.setAttribute('tabindex', '-1');
+            this.activeEle.setAttribute('tabindex', this.getDataTabindex(this.activeEle));
         }
         this.activeEle = curEle;
-        if (isNOU(this.trgtEle) && !curEle.parentElement.classList.contains(CLS_TEMPLATE)) {
-            curEle.removeAttribute('tabindex');
-        }
-        else {
-            this.activeEle.setAttribute('tabindex', '0');
+        if (this.getDataTabindex(this.activeEle) === '-1') {
+            if (isNOU(this.trgtEle) && !curEle.parentElement.classList.contains(CLS_TEMPLATE)) {
+                this.updateTabIndex('-1');
+                curEle.removeAttribute('tabindex');
+            }
+            else {
+                this.activeEle.setAttribute('tabindex', this.getDataTabindex(this.activeEle));
+            }
         }
     };
     Toolbar.prototype.getPersistData = function () {
@@ -2032,6 +2056,26 @@ var Toolbar = /** @class */ (function (_super) {
             this.isExtendedOpen = sib.classList.contains(CLS_POPUPOPEN);
         }
     };
+    Toolbar.prototype.updateHideEleTabIndex = function (ele, isHidden, isElement, eleIndex, innerItems) {
+        if (isElement) {
+            eleIndex = innerItems.indexOf(ele);
+        }
+        var nextEle = innerItems[++eleIndex];
+        while (nextEle) {
+            var skipEle = this.eleContains(nextEle);
+            if (!skipEle) {
+                var dataTabIndex = nextEle.firstElementChild.getAttribute('data-tabindex');
+                if (isHidden && dataTabIndex === '-1') {
+                    nextEle.firstElementChild.setAttribute('tabindex', '0');
+                }
+                else if (dataTabIndex !== nextEle.firstElementChild.getAttribute('tabindex')) {
+                    nextEle.firstElementChild.setAttribute('tabindex', dataTabIndex);
+                }
+                break;
+            }
+            nextEle = innerItems[++eleIndex];
+        }
+    };
     /**
      * Gets called when the model property changes.The data that describes the old and new values of the property that changed.
      *
@@ -2051,9 +2095,9 @@ var Toolbar = /** @class */ (function (_super) {
                     if (!(newProp.items instanceof Array && oldProp.items instanceof Array)) {
                         var changedProb = Object.keys(newProp.items);
                         for (var i = 0; i < changedProb.length; i++) {
-                            var index = parseInt(Object.keys(newProp.items)[i], 10);
-                            var property = Object.keys(newProp.items[index])[0];
-                            var newProperty = Object(newProp.items[index])[property];
+                            var index = parseInt(Object.keys(newProp.items)[parseInt(i.toString(), 10)], 10);
+                            var property = Object.keys(newProp.items[parseInt(index.toString(), 10)])[0];
+                            var newProperty = Object(newProp.items[parseInt(index.toString(), 10)])["" + property];
                             if (typeof newProperty !== 'function') {
                                 if (this.tbarAlign || property === 'align') {
                                     this.refresh();
@@ -2062,7 +2106,7 @@ var Toolbar = /** @class */ (function (_super) {
                                 }
                                 var popupPriCheck = property === 'showAlwaysInPopup' && !newProperty;
                                 var booleanCheck = property === 'overflow' && this.popupPriCount !== 0;
-                                if ((popupPriCheck) || (this.items[index].showAlwaysInPopup) && booleanCheck) {
+                                if ((popupPriCheck) || (this.items[parseInt(index.toString(), 10)].showAlwaysInPopup) && booleanCheck) {
                                     --this.popupPriCount;
                                 }
                                 if (isNOU(this.scrollModule)) {
@@ -2072,11 +2116,11 @@ var Toolbar = /** @class */ (function (_super) {
                                 if (this.isReact) {
                                     this.clearTemplate();
                                 }
-                                detach(itemCol[index]);
+                                detach(itemCol[parseInt(index.toString(), 10)]);
                                 this.tbarEle.splice(index, 1);
-                                this.addItems([this.items[index]], index);
+                                this.addItems([this.items[parseInt(index.toString(), 10)]], index);
                                 this.items.splice(index, 1);
-                                if (this.items[index].template) {
+                                if (this.items[parseInt(index.toString(), 10)].template) {
                                     this.tbarEle.splice(this.items.length, 1);
                                 }
                             }
@@ -2168,67 +2212,32 @@ var Toolbar = /** @class */ (function (_super) {
     Toolbar.prototype.hideItem = function (index, value) {
         var isElement = (typeof (index) === 'object') ? true : false;
         var eleIndex = index;
-        var initIndex;
         var ele;
+        if (!isElement && isNOU(eleIndex)) {
+            return;
+        }
         var innerItems = [].slice.call(selectAll('.' + CLS_ITEM, this.element));
         if (isElement) {
             ele = index;
         }
-        else if (this.tbarEle[eleIndex]) {
+        else if (this.tbarEle[parseInt(eleIndex.toString(), 10)]) {
             var innerItems_1 = [].slice.call(selectAll('.' + CLS_ITEM, this.element));
-            ele = innerItems_1[eleIndex];
+            ele = innerItems_1[parseInt(eleIndex.toString(), 10)];
         }
         if (ele) {
             if (value) {
                 ele.classList.add(CLS_HIDDEN);
-            }
-            else {
-                ele.classList.remove(CLS_HIDDEN);
-            }
-            if (value && isNOU(this.element.getAttribute('tabindex')) && !ele.classList.contains(CLS_SEPARATOR)) {
-                if (isNOU(ele.firstElementChild.getAttribute('tabindex'))) {
-                    ele.firstElementChild.setAttribute('tabindex', '-1');
-                    var innerItems_2 = [].slice.call(selectAll('.' + CLS_ITEM, this.element));
-                    if (isElement) {
-                        eleIndex = innerItems_2.indexOf(ele);
-                    }
-                    var nextEle = innerItems_2[++eleIndex];
-                    while (nextEle) {
-                        var skipEle = this.eleContains(nextEle);
-                        if (!skipEle) {
-                            nextEle.firstElementChild.removeAttribute('tabindex');
-                            break;
-                        }
-                        nextEle = innerItems_2[++eleIndex];
+                if (!ele.classList.contains(CLS_SEPARATOR)) {
+                    if (isNOU(ele.firstElementChild.getAttribute('tabindex')) ||
+                        ele.firstElementChild.getAttribute('tabindex') !== '-1') {
+                        this.updateHideEleTabIndex(ele, value, isElement, eleIndex, innerItems);
                     }
                 }
             }
-            else if (isNOU(this.element.getAttribute('tabindex')) && !ele.classList.contains(CLS_SEPARATOR)) {
-                initIndex = 0;
-                var setFlag = false;
-                var removeFlag = false;
-                var initELe = innerItems[initIndex];
-                while (initELe) {
-                    if (!initELe.classList.contains(CLS_SEPARATOR)) {
-                        if (isNOU(initELe.firstElementChild.getAttribute('tabindex'))) {
-                            initELe.firstElementChild.setAttribute('tabindex', '-1');
-                            setFlag = true;
-                        }
-                        else {
-                            if (setFlag && removeFlag) {
-                                break;
-                            }
-                            var skipEle = this.eleContains(initELe);
-                            if (!skipEle) {
-                                initELe.firstElementChild.removeAttribute('tabindex');
-                                removeFlag = true;
-                            }
-                            initELe = innerItems[++initIndex];
-                        }
-                    }
-                    else {
-                        initELe = innerItems[++initIndex];
-                    }
+            else {
+                ele.classList.remove(CLS_HIDDEN);
+                if (!ele.classList.contains(CLS_SEPARATOR)) {
+                    this.updateHideEleTabIndex(ele, value, isElement, eleIndex, innerItems);
                 }
             }
             this.refreshOverflow();