search

primefaces / primereact

The Most Complete React UI Component Library
https://primereact.org
MIT License
6.72k stars 1.02k forks source link

TieredMenu: Submenu 'popup' behavior different than PrimeVue #5975

Open msalihaltun opened 7 months ago

msalihaltun commented 7 months ago

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.

https://stackblitz.com/edit/zjjwcj?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 commented 7 months ago

@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 commented 7 months ago

Thank you for your response.

kyybo commented 7 months ago

@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 commented 6 months ago

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%; }