TieredMenu: Submenu 'popup' behavior different than PrimeVue

[msalihaltun]

Describe the bug

I have two forked demos that shows the difference in behavior. In 10.2 TieredMenu submenus were activated by hover. In the latest version they can only be activated by clicking.

• Latest version

https://stackblitz.com/edit/zjjwcj?file=src%2FApp.jsx

• v10.2

https://stackblitz.com/edit/ompses?file=src%2FApp.jsx

Reproducer

https://stackblitz.com/edit/ompses?file=src%2FApp.jsx

PrimeReact version

latest

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Tested in chrome

Steps to reproduce the behavior

Use the demo to see the different behavior.

Expected behavior

I expect the submenus to activate by hover.

[melloware]

@msalihaltun it appears PrimeVue is the same way: https://primevue.org/tieredmenu/

It was done as part of ARIA accessibility and keyboard support: https://primereact.org/tieredmenu/#accessibility

See #5657

[msalihaltun]

Thank you for your response.

[kyybo]

@msalihaltun it appears PrimeVue is the same way: https://primevue.org/tieredmenu/

It was done as part of ARIA accessibility and keyboard support: https://primereact.org/tieredmenu/#accessibility

See #5657

@melloware @msalihaltun Hi, It seems to me that there's a difference in behavior between PrimeVue and PrimeReact. A first click is required to open a first submenu, then once the TieredMenu has the focus, you can navigate inside it with the hover. This behavior is the same for PrimeVue and PrimeReact.

However, if you activate the 'popup' property, the behavior described above no longer works in PrimeReact, as all submenus (and sub-submenus) can only be activated by clicking. (https://primereact.org/tieredmenu/#popup) In PrimeVue, with the 'popup' property, once the first sub-menu has been opened, you can navigate through the TieredMenu using hovers (https://primevue.org/tieredmenu/#popup).

I don't think this difference in behavior is intentional. Perhaps this issue should be reopened (or a new one created).

[kyybo]

Hello there ! If anyone is looking for a simple solution, waiting for a PrimeReact fix, this CSS should do the work : #your_tieredmenu_id li:hover>ul { display: block !important; top: 0px; left: 100%; }