Menu/TieredMenu: First Element focussed when opening by button trigger

[skappler]

Describe the bug

When opening a Menu or TieredMenu, the first menu entry automatically has the p-focused class with the corresponding styling.

Environment

Angular 16 app. Can also be reproduced on the demo page of primeng

Reproducer

No response

Angular version

16.2.8

PrimeNG version

16.3.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16.20.1

Browser(s)

Chrome 117, Firefox 118

Steps to reproduce the behavior

1. Go to https://primeng.org/tieredmenu
2. Click the Show button in the popup section
3. Observe the first entry being highlighted

Expected behavior

The first entry should not be highlighted

[scurk1415]

Would be nice to have this fixed

[bootsie123]

I'm running into this with the menu component on PrimeNG 17.0.0-beta.1. A fix would also be greatly appreciated. Thanks!

[Halynsky]

So small issue, but it's really confusing the users. Any updates?

[skappler]

Ich looked at the primeng codebase and found some code that specifically enables this behaviour, so I assume this might be a feature not a bug. However, I don't really understand it from a UI perspective, so maybe someone from the team can at least explain it?

[jermylucas]

@skappler @Halynsky This bug should have been fixed in the 17 rc. If you can give that a try and check. It's no longer happening on the primeng.org site either

[skappler]

Can't confirm this. For me it's still happening on the primeng.org site when selecting version 17.1.0

[Halynsky]

@jermylucas Thx for response and for the try, but unfortunately it not work on priming.org with selected 17.3.0 (latest) version. Are you sure that it's already used on the priming.org? Is this fix released in the 17.3.0? Maybe now we can try to check it in the apps?

[STotev]

I can confirm it's still an issue in 17.3.3.

[STotev]

Just wanted to mention that this part of the code doesn't seem right. I don't have time right now to experiment, though:

primeng/src/app/components/menu/menu.ts

Lines 439 to 452 in f305b27

	onOverlayAnimationStart(event: AnimationEvent) {
	switch (event.toState) {
	case 'visible':
	if (this.popup) {
	this.container = event.element;
	this.moveOnTop();
	this.onShow.emit({});
	this.appendOverlay();
	this.alignOverlay();
	this.bindDocumentClickListener();
	this.bindDocumentResizeListener();
	this.bindScrollListener();
	DomHandler.focus(this.listViewChild.nativeElement);
	this.changeFocusedOptionIndex(0);

Shouldn't this this.changeFocusedOptionIndex(0); be set to -1?

[jesuspa17]

Any update?

[rtv10dev]

Any update?

It looks like it is still happening

[pablodmngz98]

It would be nice if this could be fixed

[aaron-everly]

This would be a nice small fix. It is confusing, especially for menus with 2 items. Hovering the next item in the list makes both look active.

[PacoMPerez]

I'm facing the same issue, while PrimeNG fix this at some point I have this workaround:

I've added this to _tieredmenu.scss, basically I'm overwritting the background set on _mixins.scss for the focus on menuitems.

[mscharrig]

Please fix this problem, it is extremely annoying. Or at least give us a way to control the focus behavior.

[dalenguyen]

I created fix for this one. Let's wait for feedback from team :)