Nb-Menu items highlight/select issue.

[prasadprabha]

Hi,

I am facing an issue with Nb-Menu items while selecting. This happens sometimes in the middle of the workflow of the application. The selection of the items will not move away from it even if you select other menu items. see the screenshot

Here is the code...I dont find any error in chrome developer tools

export const MENU_ITEMS: NbMenuItem[] = [ { title: 'HOME', icon: 'nb-home', link: '/pages/dashboard', home: true, data: { permission: 'view', resource: 'home' } }, { title: 'ADMIN', icon: 'nb-person', link: '/pages/admindashboard', data: { permission: 'view', resource: 'admin' }, pathMatch: 'full' }, { title: 'DASHBOARD', icon: 'nb-keypad', data: { permission: 'view', resource: 'dashboard' }, children: [ { title: 'Leads Dashboard', link: '/pages/ldash', data: { permission: 'view', resource: 'leadsdashboard' }, pathMatch: 'full' }, { title: 'Archived Tickets', link: '/pages/archive', }, { title: 'Routed Tickets', link: '/pages/tic-routed', pathMatch: 'full' } ] }, { title: 'PAGES', icon: 'nb-tables', data: { permission: 'view', resource: 'mytickets' }, children: [ { title: 'My Tickets', link: '/pages/mytickets', pathMatch: 'full' }, { title: 'Global Search', link: '/pages/globalsearch', pathMatch: 'full' }, { title: 'Monitoring Tickets', link: '/pages/monitoringtickets', pathMatch: 'full' }, { title: 'Create Ticket', link: '/pages/createticket', pathMatch: 'full' }, ], }, { title: 'REPORTS', icon: 'nb-bar-chart', data: { permission: 'view', resource: 'reports' }, children: [ { title: 'SLA Not Met', link: '/pages/reports/sla-not-met', pathMatch: 'full' }, { title: 'Closed Tickets', link: '/pages/reports/closed', pathMatch: 'full' }, { title: 'Ticket Summary', link: '/pages/reports/summary', pathMatch: 'full' } ] }
];

Here is my package.json

"@angular/animations": "^6.0.0", "@angular/cdk": "^6.4.6", "@angular/common": "6.0.0", "@angular/compiler": "6.0.0", "@angular/core": "6.0.0", "@angular/forms": "6.0.0", "@angular/http": "6.0.0", "@angular/material": "^6.4.6", "@angular/platform-browser": "6.0.0", "@angular/platform-browser-dynamic": "6.0.0", "@angular/router": "6.0.0", "@nebular/auth": "2.0.0-rc.10", "@nebular/security": "2.0.0-rc.10", "@nebular/theme": "2.0.0-rc.10", "@ng-bootstrap/ng-bootstrap": "1.0.0", "bootstrap": "4.0.0",

Please help me out...

[Tibing]

Hi @prasadprabha, I've tried to reproduce the issue via copying your menu items and it works properly. So, could you please provide us with the reproducible example?

[prasadprabha]

Ok sure...I will bring up the reproducible code...but I am sure that this happens when there is a third level nesting in the Nb-Menu items. Here all the high-lighted items are on the third level nesting.

[aminelss]

Hi, @Tibing I'm trying nebular service menu. collapse and expand work but the select clic doesn't work. Any ideas ? ty link ==>https://stackblitz.com/edit/github-ycjjye

menuItems = [ { title: 'Profile', expanded: true, children: [ { title: 'Change Password', link: [], // goes into angularrouterLink }, { title: 'Privacy Policy', ulr: '#', // goes directly intohrefattribute }, { title: 'Logout', link: [], }, ], }, { title: 'Shopping Bag', link: [], }, { title: 'Orders', link: [], }, ];

` <nb-menu tag="menu" [items]="menuItems">

<h3>Selected item: {{ selectedItem }}</h3>
<button nbButton (click)="addMenuItem()">Add Menu Item</button>
<button nbButton (click)="collapseAll()">Collapse all menu items</button>
<button nbButton (click)="navigateHome()">Home</button>
<button nbButton (click)="getSelectedItem()">Get Selected Item</button>

`

"@agm/core": "^1.0.0-beta.5", "@angular/animations": "^7.0.3", "@angular/cdk": "^7.0.3", "@angular/common": "^7.0.3", "@angular/compiler": "^7.0.3", "@angular/core": "^7.0.3", "@angular/forms": "^7.0.3", "@angular/http": "^7.0.3", "@angular/platform-browser": "^7.0.3", "@angular/platform-browser-dynamic": "^7.0.3", "@angular/router": "^7.0.3", "@asymmetrik/ngx-leaflet": "3.0.1", "@nebular/auth": "3.2.1", "@nebular/bootstrap": "3.2.1", "@nebular/security": "3.2.1", "@nebular/theme": "3.2.1", "@ng-bootstrap/ng-bootstrap": "^4.0.0", "@swimlane/ngx-charts": "^10.0.0", "angular-tree-component": "7.2.0", "angular2-chartjs": "0.4.1", "angular2-toaster": "^6.1.0", "bootstrap": "4.0.0", "chart.js": "2.7.1", "ckeditor": "4.7.3", "classlist.js": "1.1.20150312", "core-js": "2.5.1", "echarts": "^4.0.2", "eva-icons": "^1.1.0", "intl": "1.2.5",

[jvsdevops1]

the same with me, who can help me?

[prasadprabha]

My issue still persists...Since my application has grown i am unable to segregate it from the application...