Menubar: autoDisplay and autoHide broken

[g1thuser]

Describe the bug

The autoDisplay and autoHide properties don't work anymore. autoHide doesn't work at all, autoDisplay works only once after clicking on any root menu item. Clicking on a menu item leaves the last clicked root menu item in the selected status.

The error is already present in primeng 16.1.0, but didn't exist in primeng 16.0.2

Environment

Ubuntu 22.04
Firefox 116.03

Reproducer

No response

Angular version

16.2.0

PrimeNG version

16.2.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.5.1

Browser(s)

No response

Steps to reproduce the behavior

see here for primeng 16.1.0

see here for primeng 16.2.0

Expected behavior

see here for primeng 16.0.2

[SoyDiego]

Hi @g1thuser, they know about the problem and will fix it.
Here you have a reply of one of the members of PrimeNG Team:

The link is this: #13455 (comment)

[AndreasHae]

Still causing issues on primeng 17.2.0.

Steps to reproduce:

1. Add a p-menubar with [autoHide]="true" [autoHideDelay]="0" and submenus
2. Hover over a root menu item -> submenu opens (works as intended because autoDisplay default is true)
3. Hover away from menubar -> submenu should close immediately, but stays open

[chimayko]

Still happening on 17.5

Still causing issues on primeng 17.2.0.

Steps to reproduce:

1. Add a p-menubar with [autoHide]="true" [autoHideDelay]="0" and submenus
2. Hover over a root menu item -> submenu opens (works as intended because autoDisplay default is true)
3. Hover away from menubar -> submenu should close immediately, but stays open

Still happening on 17.5, following the same steps described above.

Workaround:

Define a viewChild for the menu bar and add a mouseleave callback to it and force close, using renderer2:

this.renderer.listen(this.menubar.el.nativeElement, 'mouseleave', () => {
      this.menubar.hide();
    });

[kubedan]

Autodisplay works if change source code.

--- a/src/app/components/tieredmenu/tieredmenu.ts
+++ b/src/app/components/tieredmenu/tieredmenu.ts
@@ -695,6 +695,9 @@
 
  onItemMouseEnter(event: any) {
     if (!DomHandler.isTouchDevice()) {
+      if (this.autoDisplay) {
+        this.dirty = true; 
+        }
       if (this.dirty) {
         this.onItemChange(event);
       }

[JeffersonFarFan]

Are there any updates or workarounds for autoDisplay?
Neither default = true nor setting it to true works for me.

Still happening on 17.14.1

Found out that its not working only for chrome

[kubedan]

Are there any updates or workarounds for autoDisplay? Neither default = true nor setting it to true works for me.

Still happening on 17.14.1

Found out that its not working only for chrome

You can do with the tieredmenu component what I did with the fileupload component (#15212 (comment)) and fix it as I mentioned here: #13512 (comment).

[JeffersonFarFan]

@kubedan Thanks for answer. So theres no solution without updating the primeng code ?

[kubedan]

@kubedan Thanks for answer. So theres no solution without updating the primeng code ?

Unfortunately, I don't know of any other solution.

[bjsawyer]

I've opened a PR based on @kubedan 's suggestion here #16077

[mgafsia]

Unfortunately, I still have the issue for autoDisplay and autohide. It still not work with v17.18.9. I'm using Chrome.

Any solution please ?