akveo / akveo/ngx-admin

Drop-down Menus (NbContextMenu & NbSelect) do not work after login without refreshing the app first.

Abierto
#5,739 0 comentarios 1 reacción 0 asignados Ver en GitHub
Lenguaje dominante
TypeScript
Estrellas
25.7k
Forks
7.9k
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

### Issue type

**I'm submitting a bug report**

### Issue description

**Current behavior:**

I should start out by saying that I'm creating a MEAN Stack Application that has **user login and registration** using Nebular components and the **email NbPasswordAuthStrategy**. To this point I was able to create a basic application with a sidebar, a header and some users. **The problem appears when a user signs-in to the application and attempts to click on the NbSelect component that appears on the top-right corner of the application**. The odd thing about this is that the problem goes away if you refresh the page after signing-in:
1

Here is the that error appears in the DevTools console up-close:
```
ERROR TypeError: Cannot read property 'appendChild' of null
at NbOverlayContainerAdapter._createContainer (index.js:2006)
at NbOverlayContainerAdapter.getContainerElement (overlay.js:1198)
at NbOverlay._createHostElement (overlay.js:4233)
at NbOverlay.create (overlay.js:4192)
at NbOverlayService.create (index.js:2572)
at NbDynamicOverlay.createOverlay (index.js:12052)
at NbDynamicOverlay.show (index.js:12014)
at SafeSubscriber._next (index.js:12243)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
at SafeSubscriber.next (Subscriber.js:122)
```

**Note1**: I did not use the ngx-admin-starter-kit, but rather I just created my own Angular App from scratch.
**Note2**: While this example demonstrates the error with NbContextMenu, I assure you the exact same error appears under the same circumstances with the NbSelectComponent.

**Expected behavior:**

The appropriate would of course be that the drop-down context menu would appear instead of giving off this error.

**Steps to reproduce:**

Load up the site -> Create a user -> Login -> Click on the user NbContextMenu at the top right corner without refreshing the page.

**Related code:**

I've created [this public repository](https://github.com/Nikitas-io/Ngx-Dropdown-Issue) so that reviewers can look at the issue thoroughly and I also [deployed the project to Heroku for a live preview](https://nebularmeanstack.herokuapp.com/#/). You can create a new user to try it out yourself.

The offending code that refers to the Context Menu is located in the **app.component.ts** file:
```
export class AppComponent implements OnInit {

// User login flag.
isLoggedIn = false;
// A user variable, which will store the JTW token payload inside of the component.
user = {};
// NbContextMenu dropdown options.
dropdownItems = [
{
title: 'Profile',
link: '/profile'
},
{
title: 'Log out',
link: '/auth/logout'
}
];
// The route paths of the application.
items: NbMenuItem[] = [
{
title: 'Home',
link: '/'
},
{
title: 'Users',
link: '/users'
},
{
title: 'Products',
link: '/products'
},
{
title: 'Orders',
link: '/orders'
},
];

constructor(@Inject(NB_WINDOW) private window,
private sidebarService: NbSidebarService,
private authService: NbAuthService,
private usersService: UsersService,
private nbMenuService: NbMenuService,
) { }

ngOnInit() {
// Get the user token.
this.authService.onTokenChange().subscribe((token: NbAuthJWTToken) => {
// Validate the user token.
if (token.isValid()) {
// Receive the token payload and assign it to the `user` variable.
this.user = token.getPayload();
console.log(this.user["_id"]);

// Change the login button to the user on the header.
this.isLoggedIn = true;

// Fetch the signed-in user's data.
this.usersService.getUser(this.user["_id"]).subscribe(user => {
// Set the signed in user's name.
this.user["fullName"] = user["fullName"];
})
}

if (!token.isValid()) {
// Change the User to the Login button on the header.
this.isLoggedIn = false;
}
});

// Context Menu Event Handler.
this.nbMenuService.onItemClick().pipe(
filter(({ tag }) => tag === 'my-context-menu'),
map(({ item: { title } }) => title),
).subscribe((title) => {
// Check if the Logout menu item was clicked.
if (title == 'Log out') {
// Logout the user.
this.authService.logout('email').subscribe((Observable) => {
// Clear the user. (THIS doesn't seem like the right way to do it).
this.user = {};
})
}
});
}

toggle() {
this.sidebarService.toggle(false, 'left');
}

}
```
and its corresponding **app.component.html** file:
```





Login





```
### Other information:
- Node Version: `v12.18.0`
- Npm Version:
```
{
'nebular-app': '1.0.0',
npm: '6.14.5',
ares: '1.16.0',
brotli: '1.0.7',
cldr: '37.0',
http_parser: '2.9.3',
icu: '67.1',
llhttp: '2.0.4',
modules: '72',
napi: '6',
nghttp2: '1.41.0',
node: '12.18.0',
openssl: '1.1.1g',
tz: '2019c',
unicode: '13.0',
uv: '1.37.0',
v8: '7.8.279.23-node.37',
zlib: '1.2.11'
}
```
OS: Windows 10
Browser: Brave Browser (It is a Chrome clone)

**Angular, Nebular**
package.json:
```
{
"name": "nebular-app",
"version": "1.0.0",
"description": "An app constructed with Nebular components",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"debug": "node --inspect-brk server.js",
"start": "nodemon server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"@hapi/joi": "^17.1.1",
"bcryptjs": "^2.4.3",
"body-parser": "^1.19.0",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"jsonwebtoken": "^8.5.1",
"mongojs": "^3.1.0",
"mongoose": "^5.9.25"
}
}
```

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.