@syncfusion/ej2-navigations 21.2.8 → 21.2.9

package/dist/es6/ej2-navigations.es2015.js

@@ -1458,7 +1458,14 @@ let MenuBase = class MenuBase extends Component {
     }
     getUlByNavIdx(navIdxLen = this.navIdx.length) {
         if (this.isMenu) {
-            const popup = [this.getWrapper()].concat([].slice.call(selectAll('.' + POPUP)))[navIdxLen];
+            const popups = [];
+            const allPopup = selectAll('.' + POPUP);
+            allPopup.forEach((elem) => {
+                if (this.element.id === elem.id.split('-')[2]) {
+                    popups.push(elem);
+                }
+            });
+            const popup = [this.getWrapper()].concat([].slice.call(popups))[navIdxLen];
             return isNullOrUndefined(popup) ? null : select('.e-menu-parent', popup);
         }
         else {
@@ -3633,20 +3640,20 @@ let Toolbar = class Toolbar extends Component {
                         if (isVisible(this.popObj.element)) {
                             nodes = [].slice.call(popupCheck.children);
                             if (e.action === 'home') {
-                                ele = nodes[0];
+                                ele = this.focusFirstVisibleEle(nodes);
                             }
                             else {
-                                ele = nodes[nodes.length - 1];
+                                ele = this.focusLastVisibleEle(nodes);
                             }
                         }
                     }
                     else {
                         nodes = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + ')');
                         if (e.action === 'home') {
-                            ele = nodes[0];
+                            ele = this.focusFirstVisibleEle(nodes);
                         }
                         else {
-                            ele = nodes[nodes.length - 1];
+                            ele = this.focusLastVisibleEle(nodes);
                         }
                     }
                     if (ele) {
@@ -3760,6 +3767,30 @@ let Toolbar = class Toolbar extends Component {
     eleContains(el) {
         return el.classList.contains(CLS_SEPARATOR) || el.classList.contains(CLS_DISABLE$2) || el.getAttribute('disabled') || el.classList.contains(CLS_HIDDEN) || !isVisible(el) || !el.classList.contains(CLS_ITEM);
     }
+    focusFirstVisibleEle(nodes) {
+        let element;
+        let index = 0;
+        while (index < nodes.length) {
+            const ele = nodes[parseInt(index.toString(), 10)];
+            if (!ele.classList.contains(CLS_HIDDEN) && !ele.classList.contains(CLS_DISABLE$2)) {
+                return ele;
+            }
+            index++;
+        }
+        return element;
+    }
+    focusLastVisibleEle(nodes) {
+        let element;
+        let index = nodes.length - 1;
+        while (index >= 0) {
+            const ele = nodes[parseInt(index.toString(), 10)];
+            if (!ele.classList.contains(CLS_HIDDEN) && !ele.classList.contains(CLS_DISABLE$2)) {
+                return ele;
+            }
+            index--;
+        }
+        return element;
+    }
     eleFocus(closest$$1, pos) {
         const sib = Object(closest$$1)[pos + 'ElementSibling'];
         if (sib) {
@@ -4401,12 +4432,10 @@ let Toolbar = class Toolbar extends Component {
             if (checkoffset) {
                 if (inEle[parseInt(i.toString(), 10)].classList.contains(CLS_SEPARATOR)) {
                     if (this.overflowMode === 'Extended') {
-                        if (itemCount === itemPopCount) {
-                            const sepEle = inEle[parseInt(i.toString(), 10)];
-                            if (checkClass(sepEle, [CLS_SEPARATOR, CLS_TBARIGNORE])) {
-                                inEle[parseInt(i.toString(), 10)].classList.add(CLS_POPUP);
-                                itemPopCount++;
-                            }
+                        const sepEle = inEle[parseInt(i.toString(), 10)];
+                        if (checkClass(sepEle, [CLS_SEPARATOR, CLS_TBARIGNORE])) {
+                            inEle[parseInt(i.toString(), 10)].classList.add(CLS_POPUP);
+                            itemPopCount++;
                         }
                         itemCount++;
                     }
@@ -5357,10 +5386,7 @@ let Toolbar = class Toolbar extends Component {
                     break;
                 case 'width':
                     setStyleAttribute(tEle, { 'width': formatUnit(newProp.width) });
-                    this.renderOverflowMode();
-                    if (this.popObj && wid < tEle.offsetWidth) {
-                        this.popupRefresh(this.popObj.element, false);
-                    }
+                    this.refreshOverflow();
                     break;
                 case 'height':
                     setStyleAttribute(this.element, { 'height': formatUnit(newProp.height) });