Menubar with autoDisplay doesn't close submenu on mouseout

[Urtgard]

[x] bug report => Search github for a similar issue or PR before submitting [ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap [ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports) https://stackblitz.com/edit/primeng-menubar-demo-nfau6b?file=src%2Fapp%2Fapp.component.html

Current behavior When the cursor leaves a menuitem the submenu stays open and the css-class p-menuitem-active won't be removed.

Expected behavior Submenus shold be closed and p-menuitem-active should be removed.

• Angular version: 12.0.5

• PrimeNG version: 12.2.0

• Browser: Chrome 94

---

If you disagree and think this is working as intended, please add an option to choose how the menubar should handle on mouseout.

[yigitfindikli]

Hi @Urtgard,

Menu components close when clicking events by design. So it's not a bug. I'm gonna mark it as a discussion. Let's hear the community.

[daangeerdink]

Agree with @Urtgard. It's strange that the active class remains while the cursor is not over the menuitem anymore. The same could be said about the submenu staying open.

The way I expect to see it is autoDisplay on true is hover-based, while on false it's click-based.

[sutux]

I agree with @daangeerdink. There are no words to add, he described it well.

[johnfewell]

Yes, please change this, it should at least be an option.

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap? Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,

[sutux]

Hi,

unfortunately, this is still an issue. I tried it on Stackblitz with PrimeNG Version 14.2.1: https://stackblitz.com/edit/primeng-menubar-demo-cv9w8m?file=src/app/app.component.html

[pete-mcwilliams]

using this as a workaround

<p-tieredMenu #tieredMenu [model]="menuItems" [autoDisplay]="true" (mouseleave)="onMouseleave()"></p-tieredMenu>

  onMouseleave(){
    window.document.body.click();
  }

[fabiosalat]

using this as a workaround

<p-tieredMenu #tieredMenu [model]="menuItems" [autoDisplay]="true" (mouseleave)="onMouseleave()"></p-tieredMenu>

  onMouseleave(){
    window.document.body.click();
  }

this is perfectly working, thanks!

but... shouldn't autoHide property be doing the same thing? that's not working on Angular 17 for me

[vpeter1119]

I was also expecting [autoHide]="true" to achieve this, but it doesn't seem to work in v16.9.1.