Dropdown Menu doesn't open after opening for the first time
My dropdown menu doesn't open after clicking on it for the first time and selecting a sub-menu, can someone help me fix it?
Metronic version: v8.0.32
Framework: Angular v12.1.2
Replies (22)
Hi Breno,
Have you tried to add MenuComponent.createInstances(); in ngOnInit(); in the user-inner component? So KTMenu will reinitialize inside the inner page as well.
Thanks
Faizal, I'm currently using Angular version of Metronic, that being said: There is no 'KTMenu' on the project (as already mentioned on the question).
There is no solution on behalf of support? I've already shown the problem and even with that you guys couldn't give me a solution, thanks anyway.
(FOR ANYONE THAT IS SEEING THIS TOPIC WITH THE SAME PROBLEM: NONE OF THE SOLUTIONS THAT FAIZAL GAVE FIXED THE PROBLEM!)
Hi,
No worries, we will do our best to resolve your issue.
Could you please refer to the updated reply, Faizal used KTMenu instead of MenuComponent by an accident.
If this won't resolve your issue, we will check it further and provide a solution.
Regards.
Hi!
MenuComponent does not have a Angular lifecycle 'ngOnInit' because it is a JavaScript class, and since Angular works with TypeScript I'm only able to insert ngOnInit if add a decorator on it so that Angular recognizes it, also if I add a decorator at the class just to check if the solution will work the whole class breaks and doesn't compiles.
UPDATE: Problem solved after updating Metronic version, thanks anyway.
Glad to hear that. All the best with your project. If you need any further help please do let us know.
Hi Breno,
In our example, we use data-kt-menu-trigger=click. In the video, the dropdown is working when I click it, even after I switch between pages.
I have tried to click any link inside the dropdown. Eg. My Profile, then it goes to the Profile page.
Could you please clarify the issue that you have "click on user-inner and it doesn't open"?
To better understand and reproduce the issue, could you please provide additional information and details on the steps you took to encounter this problem?
Additionally, it would also be helpful if you could share any error messages or messages displayed in the browser's console.
Thanks
Faizal, unfortunately the input box where I should reply you doesn't let me insert a tag video into it so that I could reproduce the issue exactly as it occurs, I'll try to insert images but what I told you on the question is subjective, when I switch pages using the user-inner component that is located in MenuComponent it works in the first time, after it, doesn't works anymore!
<img src="https://i.ibb.co/tKzqbMZ/Bug-Metronic.png" alt="Bug-Metronic" border="0">
Browser's console does not pop any errors messages.
Currently I'm migrating the project to newest update of Metronic to check if it'll fix the problem, however it is a demand I was not expecting, in case I succeed on the update I'll let you know!
UPDATE:
Video reproducing the issue:
https://www.loom.com/share/d1bde2f10c624280bb5fe9d8e8901956
Faizal?
Hi Breno,
May I know if you are working on this dropdown on the topbar? This dropdown works for click.
Please check the video here:
https://www.loom.com/share/6f4c964212be43b2bd9f0f38e27c2169
https://preview.keenthemes.com/metronic8/angular/demo1/dashboard
Thanks
Hi Faizal,
Exactly, that is the one I'm currently using.
Even still not fixed in the latest version as well.
Go to your preview URL
https://preview.keenthemes.com/metronic8/angular/demo1/dashboard
From left Side bar click on any of the Error Component and come back again on the dashboard the "Profile dropdown on the right side top lift will stopped working".
Why you guys are unable to fix this issue I saw around 20+ threads almost everyone is facing the same issue since 1.5 years but still no luck.
Any idea about this issue when it will get fixed ?
Hi Breno,
In the latest version of Metronic Angular, we add it to the ngOnInit function of this file.
demo1/src/app/_metronic/layout/components/aside/aside.component.ts
Thanks
Faizal, the component you mentioned already has this code snippet, do you have a different solution?
Just to contextualize: I have the 'topbar' component where on the top right corner I should click on user-inner component and switch features between my project, and when doing that the 'topbar' basically stops working, I click on user-inner and it doesn't open.
Curious observation: If I switch the property 'data-kt-menu-trigger' of topbar.component from "click" to "hover", it works fine! The problem is that I need it to be click! Apparently the topbar doesn't renderize completelly after I switch pages and it crashes.
Faizal?
Hi Breno,
Sorry, we thought you are using the HTML version.
We did this to reinitialize the dropdown menu. Could you please try it?
ngOnInit(): void {
const routerSubscription = this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd || event instanceof NavigationCancel) {
this.menuReinitialization();
}
});
}
menuReinitialization() {
setTimeout(() => {
MenuComponent.reinitialization();
DrawerComponent.reinitialization();
ToggleComponent.reinitialization();
ScrollComponent.reinitialization();
}, 50);
}Thanks
No problem Faizal!
Sorry to bother, but can you be more specific? I should insert that function on MenuComponent.ts? Because I tried doing that and since 'ngOnInit' is a native lifecycle from Angular the MenuComponent doesn't let me put that in there!
Hi Breno,
Could you please try to reinitialize the dropdown? Maybe can put it in the mount function.
KTMenu.createInstances();Thanks
Hi Faizal,
In which component should I add this function? Because I don't have 'KTMenu' on the project.
I do have the _metronic > _kt > components > MenuComponent.ts, but there is no place to insert this function because Angular doesn't recognize it, could you give me more details please?
Hi Bruno,
i think it's late to answer u , me too i had same problem before, and i fixed it as Faizel said in my angular app
code:
<div class="app-navbar-item" [ngClass]="itemClass">
<!--begin::Menu wrapper-->
<div class="cursor-pointer symbol" [ngClass]="userAvatarClass" data-kt-menu-trigger="click" data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end">
<img ngSrc="./assets/img/users/avatar.png" alt="GAB USER" height="1200" width="1200" />
</div>
<app-user-inner data-kt-menu='true'></app-user-inner>
<!--end::Menu wrapper-->
</div>
reinitializeMenu() {
setTimeout(() => {
// Reinitialize the dropdown (MenuComponent) and other components (source: doc metronics)
MenuComponent.createInstances("[data-kt-menu=\"true\"]");
DrawerComponent.reinitialization(); // If you have drawers
ToggleComponent.reinitialization(); // If you have toggle buttons
ScrollComponent.reinitialization(); // If you have scroll components
}, 100);
}
ngOnInit(): void {
MenuComponent.reinitialization();
// reinit menu
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd || event instanceof NavigationCancel) {
this.reinitializeMenu();
}
});
}
solution works! and also to avoid problem after logout and login again i did :
this.router.navigate(["/dashboard"]).then(() => {
location.reload();
});
