Menubar, MegaMenu: Submenu doesn't open on mouseover, when using touchscreen notebook with mouse

[can-oezkan]

Describe the bug

When using a touchscreen notebook, the submenu's dont show on mouseover. You have to click the menu first.

I assume that this bug got introduced by this PR: #13447

The underlying issue seems to be this method, that gets called to determine if a mouseover should show the submenu or not:

primeng/src/app/components/dom/domhandler.ts

Lines 485 to 487 in 21b49bc

	public static isTouchDevice() {
	return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
	}

Environment

angular business application

Reproducer

No response

Angular version

17.3.7

PrimeNG version

17.16.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v20.12.2

Browser(s)

No response

Steps to reproduce the behavior

1. Use a notebook with touchscreen
2. use the touchpad or external mouse to hover over menu

Expected behavior

The submenu should show on mouseover when using a touchpad or external mouse.

[DerekBolger]

Same Issue here tested using multiple variants of Microsoft Sufrace with external mouse and touchscreen enabled also Microsoft Surfacebook Laptops 3&4 with built in mousepad and touchscreen enabled.

Describe the bug

In past version of PrimeNG, submenus in Menubar Component were shown immediately when hovering over an item using a touch enabled device. In current version if we disable the touchscreen and the links work on hover > enable touchscreen and links don't show on hover.

Environment

N/A

Reproducer

See below

Angular version

17.3.11

PrimeNG version

17.18.11

Build / Runtime

Angular CLI App

Language

TypeScript

Node version

18.18.2

Browser(s)

Chrome, Edge & Firefox

Steps to reproduce the behavior

Use PrimeNG's showcase for the Menubar: https://primeng.org/menubar utilising a touchscreen enabled device.

Behaviour

Hover over the Projects menu item and note that it's submenus do not show on hover on a device with touchscreen enabled, either using external mouse on Surfacebook or built in mousepad on Surface Laptop.

Screen.Recording.2024-10-23.123053.1.mp4

In the above video submenu opens on click but not hover when touchscreen is enabled.

Expected behavior

Submenus should appear when hovering over a menu item with Submenus.

There was a similar issue to this effecting the Tiered Menu https://primeng.org/tieredmenu that was fixed in this Pull Request in version 17.18.6 - #16077

primeng/src/app/components/tieredmenu/tieredmenu.ts

Lines 707 to 714 in 3f1e943

	onItemMouseEnter(event: any) {
	if (!DomHandler.isTouchDevice()) {
	if (this.autoDisplay) {
	this.dirty = true;
	}
	if (this.dirty) {
	this.onItemChange(event);
	}

The above is similar to this code in menubar.ts

primeng/src/app/components/menubar/menubar.ts

Lines 676 to 681 in 3f1e943

	onItemMouseEnter(event: any) {
	if (!DomHandler.isTouchDevice()) {
	if (!this.mobileActive) {
	this.onItemChange(event);
	}
	}

[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 and try the latest PrimeNG version(v19). If there is no improvement on this, can you open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding!
Best Regards,