@syncfusion/ej2-navigations 17.3.9-beta → 17.3.14-96615

package/src/common/menu-base-model.d.ts

@@ -1,4 +1,4 @@
-import { Component, Property, ChildProperty, NotifyPropertyChanges, INotifyPropertyChanged, AnimationModel } from '@syncfusion/ej2-base';import { Event, EventHandler, EmitType, BaseEventArgs, KeyboardEvents, KeyboardEventArgs, Touch, TapEventArgs } from '@syncfusion/ej2-base';import { attributes, Animation, AnimationOptions, TouchEventArgs, MouseEventArgs } from '@syncfusion/ej2-base';import { Browser, Collection, setValue, getValue, getUniqueID, getInstance, isNullOrUndefined } from '@syncfusion/ej2-base';import { select, selectAll, closest, detach, append, rippleEffect, isVisible, Complex, addClass, removeClass } from '@syncfusion/ej2-base';import { ListBase, ListBaseOptions } from '@syncfusion/ej2-lists';import { getZindexPartial, calculatePosition, OffsetPosition, isCollide, flip, fit, Popup } from '@syncfusion/ej2-popups';import { updateBlazorTemplate, resetBlazorTemplate, blazorTemplates, extend } from '@syncfusion/ej2-base';import { getScrollableParent } from '@syncfusion/ej2-popups';import { HScroll } from '../common/h-scroll';import { VScroll } from '../common/v-scroll';
+import { Component, Property, ChildProperty, NotifyPropertyChanges, INotifyPropertyChanged, AnimationModel } from '@syncfusion/ej2-base';
 import {MenuEffect,MenuEventArgs,BeforeOpenCloseMenuEventArgs,OpenCloseMenuEventArgs} from "./menu-base";
 import {ComponentModel} from '@syncfusion/ej2-base';
 
@@ -8,46 +8,46 @@ import {ComponentModel} from '@syncfusion/ej2-base';
 export interface FieldSettingsModel {
 
     /**
-     * Specifies the itemId field for Menu item.
-     * @default 'id'
-     */
-    itemId?: string | string[];
+     * Specifies the itemId field for Menu item.
+     * @default 'id'
+     */
+    itemId?: string | string[];
 
     /**
-     * Specifies the parentId field for Menu item.
-     * @default 'parentId'
-     */
-    parentId?: string | string[];
+     * Specifies the parentId field for Menu item.
+     * @default 'parentId'
+     */
+    parentId?: string | string[];
 
     /**
-     * Specifies the text field for Menu item.
-     * @default 'text'
-     */
-    text?: string | string[];
+     * Specifies the text field for Menu item.
+     * @default 'text'
+     */
+    text?: string | string[];
 
     /**
-     * Specifies the css icon field for Menu item.
-     * @default 'iconCss'
-     */
-    iconCss?: string | string[];
+     * Specifies the css icon field for Menu item.
+     * @default 'iconCss'
+     */
+    iconCss?: string | string[];
 
     /**
-     * Specifies the Url field for Menu item.
-     * @default 'url'
-     */
-    url?: string | string[];
+     * Specifies the Url field for Menu item.
+     * @default 'url'
+     */
+    url?: string | string[];
 
     /**
-     * Specifies the separator field for Menu item.
-     * @default 'separator'
-     */
-    separator?: string | string[];
+     * Specifies the separator field for Menu item.
+     * @default 'separator'
+     */
+    separator?: string | string[];
 
     /**
-     * Specifies the children field for Menu item. 
-     * @default 'items'
-     */
-    children?: string | string[];
+     * Specifies the children field for Menu item. 
+     * @default 'items'
+     */
+    children?: string | string[];
 
 }
 
@@ -57,41 +57,41 @@ export interface FieldSettingsModel {
 export interface MenuItemModel {
 
     /**
-     * Defines class/multiple classes separated by a space for the menu Item that is used to include an icon.
-     * Menu Item can include font icon and sprite image.
-     * @default null
-     */
-    iconCss?: string;
+     * Defines class/multiple classes separated by a space for the menu Item that is used to include an icon.
+     * Menu Item can include font icon and sprite image.
+     * @default null
+     */
+    iconCss?: string;
 
     /**
-     * Specifies the id for menu item.
-     * @default ''
-     */
-    id?: string;
+     * Specifies the id for menu item.
+     * @default ''
+     */
+    id?: string;
 
     /**
-     * Specifies separator between the menu items. Separator are either horizontal or vertical lines used to group menu items.
-     * @default false
-     */
-    separator?: boolean;
+     * Specifies separator between the menu items. Separator are either horizontal or vertical lines used to group menu items.
+     * @default false
+     */
+    separator?: boolean;
 
     /**
-     * Specifies the sub menu items that is the array of MenuItem model.
-     * @default []
-     */
-    items?: MenuItemModel[];
+     * Specifies the sub menu items that is the array of MenuItem model.
+     * @default []
+     */
+    items?: MenuItemModel[];
 
     /**
-     * Specifies text for menu item.
-     * @default ''
-     */
-    text?: string;
+     * Specifies text for menu item.
+     * @default ''
+     */
+    text?: string;
 
     /**
-     * Specifies url for menu item that creates the anchor link to navigate to the url provided.
-     * @default ''
-     */
-    url?: string;
+     * Specifies url for menu item that creates the anchor link to navigate to the url provided.
+     * @default ''
+     */
+    url?: string;
 
 }
 
@@ -101,30 +101,30 @@ export interface MenuItemModel {
 export interface MenuAnimationSettingsModel {
 
     /**
-     * Specifies the effect that shown in the sub menu transform.
-     * The possible effects are:
-     * * None: Specifies the sub menu transform with no animation effect.
-     * * SlideDown: Specifies the sub menu transform with slide down effect.
-     * * ZoomIn: Specifies the sub menu transform with zoom in effect.
-     * * FadeIn: Specifies the sub menu transform with fade in effect.
-     * @default 'SlideDown'
-     * @aspType Syncfusion.EJ2.Navigations.MenuEffect
-     * @blazorType Syncfusion.EJ2.Navigations.MenuEffect
-     * @isEnumeration true
-     */
-    effect?: MenuEffect;
+     * Specifies the effect that shown in the sub menu transform.
+     * The possible effects are:
+     * * None: Specifies the sub menu transform with no animation effect.
+     * * SlideDown: Specifies the sub menu transform with slide down effect.
+     * * ZoomIn: Specifies the sub menu transform with zoom in effect.
+     * * FadeIn: Specifies the sub menu transform with fade in effect.
+     * @default 'SlideDown'
+     * @aspType Syncfusion.EJ2.Navigations.MenuEffect
+     * @blazorType Syncfusion.EJ2.Navigations.MenuEffect
+     * @isEnumeration true
+     */
+    effect?: MenuEffect;
 
     /**
-     * Specifies the time duration to transform object.
-     * @default 400
-     */
-    duration?: number;
+     * Specifies the time duration to transform object.
+     * @default 400
+     */
+    duration?: number;
 
     /**
-     * Specifies the easing effect applied while transform.
-     * @default 'ease'
-     */
-    easing?: string;
+     * Specifies the easing effect applied while transform.
+     * @default 'ease'
+     */
+    easing?: string;
 
 }
 
@@ -135,118 +135,118 @@ export interface MenuAnimationSettingsModel {
 export interface MenuBaseModel extends ComponentModel{
 
     /**
-     * Triggers while rendering each menu item.
-     * @event
-     * @blazorProperty 'OnItemRender'
-     */
-    beforeItemRender?: EmitType<MenuEventArgs>;
+     * Triggers while rendering each menu item.
+     * @event
+     * @blazorProperty 'OnItemRender'
+     */
+    beforeItemRender?: EmitType<MenuEventArgs>;
 
     /**
-     * Triggers before opening the menu item.
-     * @event
-     * @blazorProperty 'OnOpen'
-     */
-    beforeOpen?: EmitType<BeforeOpenCloseMenuEventArgs>;
+     * Triggers before opening the menu item.
+     * @event
+     * @blazorProperty 'OnOpen'
+     */
+    beforeOpen?: EmitType<BeforeOpenCloseMenuEventArgs>;
 
     /**
-     * Triggers while opening the menu item.
-     * @event
-     * @blazorProperty 'Opened'
-     */
-    onOpen?: EmitType<OpenCloseMenuEventArgs>;
+     * Triggers while opening the menu item.
+     * @event
+     * @blazorProperty 'Opened'
+     */
+    onOpen?: EmitType<OpenCloseMenuEventArgs>;
 
     /**
-     * Triggers before closing the menu.
-     * @event
-     * @blazorProperty 'OnClose'
-     */
-    beforeClose?: EmitType<BeforeOpenCloseMenuEventArgs>;
+     * Triggers before closing the menu.
+     * @event
+     * @blazorProperty 'OnClose'
+     */
+    beforeClose?: EmitType<BeforeOpenCloseMenuEventArgs>;
 
     /**
-     * Triggers while closing the menu.
-     * @event
-     * @blazorProperty 'Closed'
-     */
-    onClose?: EmitType<OpenCloseMenuEventArgs>;
+     * Triggers while closing the menu.
+     * @event
+     * @blazorProperty 'Closed'
+     */
+    onClose?: EmitType<OpenCloseMenuEventArgs>;
 
     /**
-     * Triggers while selecting menu item.
-     * @event
-     * @blazorProperty 'ItemSelected'
-     */
-    select?: EmitType<MenuEventArgs>;
+     * Triggers while selecting menu item.
+     * @event
+     * @blazorProperty 'ItemSelected'
+     */
+    select?: EmitType<MenuEventArgs>;
 
     /**
-     * Triggers once the component rendering is completed.
-     * @event
-     * @blazorProperty 'Created'
-     */
-    created?: EmitType<Event>;
+     * Triggers once the component rendering is completed.
+     * @event
+     * @blazorProperty 'Created'
+     */
+    created?: EmitType<Event>;
 
     /**
-     * Defines class/multiple classes separated by a space in the Menu wrapper.
-     * @default ''
-     */
-    cssClass?: string;
+     * Defines class/multiple classes separated by a space in the Menu wrapper.
+     * @default ''
+     */
+    cssClass?: string;
 
     /**
-     * Specifies whether to show the sub menu or not on click.
-     * When set to true, the sub menu will open only on mouse click.
-     * @default false
-     */
-    showItemOnClick?: boolean;
+     * Specifies whether to show the sub menu or not on click.
+     * When set to true, the sub menu will open only on mouse click.
+     * @default false
+     */
+    showItemOnClick?: boolean;
 
     /**
-     * Specifies target element selector in which the ContextMenu should be opened.
-     * Specifies target element to open/close Menu while click in Hamburger mode.
-     * @default ''
-     * @private
-     */
-    target?: string;
+     * Specifies target element selector in which the ContextMenu should be opened.
+     * Specifies target element to open/close Menu while click in Hamburger mode.
+     * @default ''
+     * @private
+     */
+    target?: string;
 
     /**
-     * Specifies the filter selector for elements inside the target in that the context menu will be opened.
-     * Not applicable to Menu component.
-     * @default ''
-     * @private
-     */
-    filter?: string;
+     * Specifies the filter selector for elements inside the target in that the context menu will be opened.
+     * Not applicable to Menu component.
+     * @default ''
+     * @private
+     */
+    filter?: string;
 
     /**
-     * Specifies the template for Menu item.
-     * Not applicable to ContextMenu component.
-     * @default null
-     * @private
-     */
-    template?: string;
+     * Specifies the template for Menu item.
+     * Not applicable to ContextMenu component.
+     * @default null
+     * @private
+     */
+    template?: string;
 
     /**
-     * Specifies whether to enable / disable the scrollable option in Menu.
-     * Not applicable to ContextMenu component.
-     * @default false
-     * @private
-     */
-    enableScrolling?: boolean;
+     * Specifies whether to enable / disable the scrollable option in Menu.
+     * Not applicable to ContextMenu component.
+     * @default false
+     * @private
+     */
+    enableScrolling?: boolean;
 
     /**
-     * Specifies mapping fields from the dataSource.
-     * Not applicable to ContextMenu component.
-     * @default { itemId: "id", text: "text", parentId: "parentId", iconCss: "iconCss", url: "url", separator: "separator",
-     * children: "items" }
-     * @private
-     */
-    fields?: FieldSettingsModel;
+     * Specifies mapping fields from the dataSource.
+     * Not applicable to ContextMenu component.
+     * @default { itemId: "id", text: "text", parentId: "parentId", iconCss: "iconCss", url: "url", separator: "separator",
+     * children: "items" }
+     * @private
+     */
+    fields?: FieldSettingsModel;
 
     /**
-     * Specifies menu items with its properties which will be rendered as Menu.
-     * @default []
-     */
-    items?: MenuItemModel[] | { [key: string]: Object }[];
+     * Specifies menu items with its properties which will be rendered as Menu.
+     * @default []
+     */
+    items?: MenuItemModel[] | { [key: string]: Object }[];
 
     /**
-     * Specifies the animation settings for the sub menu open.
-     * @default { duration: 400, easing: 'ease', effect: 'SlideDown' }
-     */
-    animationSettings?: MenuAnimationSettingsModel;
+     * Specifies the animation settings for the sub menu open.
+     * @default { duration: 400, easing: 'ease', effect: 'SlideDown' }
+     */
+    animationSettings?: MenuAnimationSettingsModel;
 
 }

package/src/common/menu-base.d.ts

@@ -45,6 +45,22 @@ export declare class FieldSettings extends ChildProperty<FieldSettings> {
      */
     children: string | string[];
 }
+export interface BrowserDetails {
+    isAndroid?: boolean;
+    isDevice?: boolean;
+    isIE?: boolean;
+    isIos?: boolean;
+    isIos7?: boolean;
+    isMSPointer?: boolean;
+    isPointer?: boolean;
+    isTouch?: boolean;
+    isWebView?: boolean;
+    isWindows?: boolean;
+    touchStartEvent?: string;
+    touchMoveEvent?: string;
+    touchEndEvent?: string;
+    touchCancelEvent?: string;
+}
 /**
  * Specifies menu items.
  */
@@ -264,6 +280,8 @@ export declare abstract class MenuBase extends Component<HTMLUListElement> imple
     protected initialize(): void;
     private renderItems;
     protected wireEvents(): void;
+    private menuIos;
+    private getValue;
     private wireKeyboardEvent;
     private mouseDownHandler;
     private keyBoardHandler;
@@ -308,6 +326,7 @@ export declare abstract class MenuBase extends Component<HTMLUListElement> imple
     private getLIByClass;
     private getItem;
     private getItems;
+    private setItems;
     private getIdx;
     private getLI;
     private isBlazor;

package/src/common/menu-base.js

@@ -1,22 +1,22 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    }
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 import { Component, Property, ChildProperty, NotifyPropertyChanges } from '@syncfusion/ej2-base';
 import { Event, EventHandler, KeyboardEvents, Touch } from '@syncfusion/ej2-base';
 import { Animation } from '@syncfusion/ej2-base';
@@ -80,6 +80,17 @@ var FieldSettings = /** @class */ (function (_super) {
     return FieldSettings;
 }(ChildProperty));
 export { FieldSettings };
+var REGX_IOS = /(ipad|iphone|ipod touch)/i;
+var REGX_BROWSER = {
+    OPERA: /(opera|opr)(?:.*version|)[ /]([\w.]+)/i,
+    EDGE: /(edge)(?:.*version|)[ /]([\w.]+)/i,
+    CHROME: /(chrome|crios)[ /]([\w.]+)/i,
+    PANTHOMEJS: /(phantomjs)[ /]([\w.]+)/i,
+    SAFARI: /(safari)[ /]([\w.]+)/i,
+    WEBKIT: /(webkit)[ /]([\w.]+)/i,
+    MSIE: /(msie|trident) ([\w.]+)/i,
+    MOZILLA: /(mozilla)(?:.*? rv:([\w.]+)|)/i
+};
 /**
  * Specifies menu items.
  */
@@ -265,7 +276,7 @@ var MenuBase = /** @class */ (function (_super) {
                     EventHandler.add(target, 'click', this.menuHeaderClickHandler, this);
                 }
                 else {
-                    if (Browser.isIos) {
+                    if (this.menuIos()) {
                         new Touch(target, { tapHold: this.touchHandler.bind(this) });
                     }
                     else {
@@ -275,6 +286,7 @@ var MenuBase = /** @class */ (function (_super) {
             }
             this.targetElement = target;
             if (!this.isMenu) {
+                EventHandler.add(this.targetElement, 'scroll', this.scrollHandler, this);
                 for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {
                     var parent_1 = _a[_i];
                     EventHandler.add(parent_1, 'scroll', this.scrollHandler, this);
@@ -292,6 +304,22 @@ var MenuBase = /** @class */ (function (_super) {
         this.wireKeyboardEvent(wrapper);
         this.rippleFn = rippleEffect(wrapper, { selector: '.' + ITEM });
     };
+    MenuBase.prototype.menuIos = function () {
+        return this.getValue('isIos', REGX_IOS);
+    };
+    MenuBase.prototype.getValue = function (key, regX) {
+        var browserDetails = typeof window !== 'undefined' ? window.browserDetails : {};
+        if (typeof navigator !== 'undefined' && navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1 && Browser.isTouch === true && !REGX_BROWSER.CHROME.test(navigator.userAgent)) {
+            browserDetails['isIos'] = true;
+            browserDetails['isDevice'] = true;
+            browserDetails['isTouch'] = true;
+            browserDetails['isPointer'] = true;
+        }
+        if ('undefined' === typeof browserDetails["" + key]) {
+            return browserDetails["" + key] = regX.test(Browser.userAgent);
+        }
+        return browserDetails["" + key];
+    };
     MenuBase.prototype.wireKeyboardEvent = function (element) {
         var keyConfigs = {
             downarrow: DOWNARROW,
@@ -1073,7 +1101,7 @@ var MenuBase = /** @class */ (function (_super) {
         if (this.isMenu) {
             if (!this.showItemOnClick && (trgt.parentElement !== wrapper && !closest(trgt, '.e-' + this.getModuleName() + '-popup'))
                 && (!cli || (cli && !this.getIndex(cli.id, true).length))) {
-                this.removeLIStateByClass([FOCUSED, SELECTED], [wrapper]);
+                this.removeLIStateByClass([FOCUSED], [wrapper]);
                 if (this.navIdx.length) {
                     this.isClosed = true;
                     this.closeMenu(null, e);
@@ -1140,6 +1168,9 @@ var MenuBase = /** @class */ (function (_super) {
         return false;
     };
     MenuBase.prototype.menuHeaderClickHandler = function (e) {
+        if (closest(e.target, '.e-menu-wrapper').querySelector('ul.e-menu-parent').id !== this.element.id) {
+            return;
+        }
         this.element.classList.contains('e-hide-menu') ? this.openHamburgerMenu(e) : this.closeHamburgerMenu(e);
     };
     MenuBase.prototype.clickHandler = function (e) {
@@ -1150,9 +1181,16 @@ var MenuBase = /** @class */ (function (_super) {
             var wrapper = this.getWrapper();
             var trgt = e.target;
             var cli = this.cli = this.getLI(trgt);
+            var regex = new RegExp('-ej2menu-(.*)-popup');
             var cliWrapper = cli ? closest(cli, '.e-' + this.getModuleName() + '-wrapper') : null;
             var isInstLI = cli && cliWrapper && (this.isMenu ? this.getIndex(cli.id, true).length > 0
                 : wrapper.firstElementChild.id === cliWrapper.firstElementChild.id);
+            if (cli && cliWrapper && this.isMenu) {
+                var cliWrapperId = cliWrapper.id ? regex.exec(cliWrapper.id)[1] : cliWrapper.querySelector('.e-menu-parent').id;
+                if (this.element.id !== cliWrapperId) {
+                    return;
+                }
+            }
             if (isInstLI && e.type === 'click' && !cli.classList.contains(HEADER)) {
                 this.setLISelected(cli);
                 var navIdx = this.getIndex(cli.id, true);
@@ -1214,7 +1252,11 @@ var MenuBase = /** @class */ (function (_super) {
                     this.menuHeaderClickHandler(e);
                 }
                 else {
-                    if (trgt.tagName !== 'UL' || trgt.parentElement !== wrapper) {
+                    if (trgt.tagName !== 'UL' || (this.isMenu ? trgt.parentElement.classList.contains('e-menu-wrapper') &&
+                        !this.getIndex(trgt.querySelector('.' + ITEM).id, true).length : trgt.parentElement !== wrapper)) {
+                        if (!cli) {
+                            this.removeLIStateByClass([SELECTED], [wrapper]);
+                        }
                         if (!cli || !cli.querySelector('.' + CARET)) {
                             this.closeMenu(null, e);
                         }
@@ -1227,7 +1269,7 @@ var MenuBase = /** @class */ (function (_super) {
         if (this.showSubMenu) {
             var idx = this.navIdx.concat(this.cliIdx);
             var item = this.getItem(idx);
-            if (item[this.getField('children', idx.length - 1)] &&
+            if (item && item[this.getField('children', idx.length - 1)] &&
                 item[this.getField('children', idx.length - 1)].length) {
                 if (e.type === 'mouseover' || (Browser.isDevice && this.isMenu)) {
                     this.setLISelected(this.cli);
@@ -1275,6 +1317,13 @@ var MenuBase = /** @class */ (function (_super) {
         }
         return items;
     };
+    MenuBase.prototype.setItems = function (newItems, navIdx) {
+        var items = this.getItems(navIdx);
+        items.splice(0, items.length);
+        for (var i = 0; i < newItems.length; i++) {
+            items.splice(i, 0, newItems[i]);
+        }
+    };
     MenuBase.prototype.getIdx = function (ul, li, skipHdr) {
         if (skipHdr === void 0) { skipHdr = true; }
         var idx = Array.prototype.indexOf.call(ul.querySelectorAll('li'), li);
@@ -1385,8 +1434,8 @@ var MenuBase = /** @class */ (function (_super) {
                                 idx = navIdx.pop();
                                 item = this_1.getItems(navIdx);
                                 this_1.insertAfter([item[idx]], item[idx].text);
-                                item = this_1.getItems(navIdx);
                                 this_1.removeItem(item, navIdx, idx);
+                                this_1.setItems(item, navIdx);
                             }
                             navIdx.length = 0;
                         }
@@ -1450,6 +1499,7 @@ var MenuBase = /** @class */ (function (_super) {
                 }
             }
             if (!this.isMenu) {
+                EventHandler.remove(this.targetElement, 'scroll', this.scrollHandler);
                 for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {
                     var parent_2 = _a[_i];
                     EventHandler.remove(parent_2, 'scroll', this.scrollHandler);
@@ -1622,8 +1672,28 @@ var MenuBase = /** @class */ (function (_super) {
         var idx;
         var navIdx;
         var disabled = DISABLED;
+        var skipItem;
         for (var i = 0; i < items.length; i++) {
             navIdx = this.getIndex(items[i], isUniqueId);
+            if (this.navIdx.length) {
+                if (navIdx.length !== 1) {
+                    skipItem = false;
+                    for (var i_1 = 0, len = navIdx.length - 1; i_1 < len; i_1++) {
+                        if (navIdx[i_1] !== this.navIdx[i_1]) {
+                            skipItem = true;
+                            break;
+                        }
+                    }
+                    if (skipItem) {
+                        continue;
+                    }
+                }
+            }
+            else {
+                if (navIdx.length !== 1) {
+                    continue;
+                }
+            }
             idx = navIdx.pop();
             ul = this.getUlByNavIdx(navIdx.length);
             if (ul) {

package/src/common/v-scroll-model.d.ts

@@ -1,4 +1,4 @@
-import { Touch, ScrollEventArgs, TouchEventArgs, Component, EventHandler, selectAll, getUniqueID, removeClass } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, Property, Browser, detach, createElement as buildTag } from '@syncfusion/ej2-base';import { classList, SwipeEventArgs, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { Touch, ScrollEventArgs, TouchEventArgs, Component, EventHandler, selectAll, getUniqueID, removeClass } from '@syncfusion/ej2-base';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -7,9 +7,9 @@ import {ComponentModel} from '@syncfusion/ej2-base';
 export interface VScrollModel extends ComponentModel{
 
     /**
-     * Specifies the up or down scrolling distance of the vertical scrollbar moving.
-     * @default null
-     */
-    scrollStep?: number;
+     * Specifies the up or down scrolling distance of the vertical scrollbar moving.
+     * @default null
+     */
+    scrollStep?: number;
 
 }