Autofocus feature

[Timmeeeey]

Is there a reason why the autoFocus was removed? In some cases (when something else is focused) I have to manually focus the context menu via (<HTMLElement>document.getElementsByClassName('ngx-contextmenu--dropdown-menu')[0]).focus(); which feels a bit hacky.

[sroucheray]

The autoFocus options was strangely implemented and triggered a focus on all content items. That's why I removed it. But if you can provide a use case (preferably with a stackblitz). We can talk about it.

[Timmeeeey]

In many cases my context menus can be opened via keyboard. see: https://stackblitz.com/edit/angular-ivy-ef5w6d

If you focus the div via tab and click enter the context menu opens but the div stays focused. When you now select a menu item via arrow keys and click enter the menu item action will not execute. Instead the enter action of the div will be executed again.

[sroucheray]

@Timmeeeey I see the problem but your stackblitz is inaccessible, could you restore it to help me reproduce it

[Timmeeeey]

Oh sorry there was a missing character: https://stackblitz.com/edit/angular-ivy-ef5w6d

[sroucheray]

OK, I took the time to look at your example. Thanks for this @Timmeeeey ! Normally the menu is built to be opened when you right click on its holding element or if it is focused and you press the menu key on your keyboard (I forked your example to show this https://stackblitz.com/edit/angular-ivy-ef5w6d?file=src/app/app.component.html).

Two questions came about your example: 1 - Why do you use the key Enter to open the context menu instead of the built-in Menu key ? IMHO it is an anti-pattern because this is not discoverable by the user, plus the Menu key does not work. 2 - Why don't you use the provided directive to enable the menu, you wouldn't have to handle the positioning by yourself in your AppComponent ? If this is because you want to use the Enter key instead of the Menu key and we are back to question 1. It might be another reason I am curious to understand.

[Timmeeeey]

In my WebApp I have to provide an alternitive way to open a context menu (additionally to right click). For example I use a kebab menu ⋮ so a user can left click on that or focus this icon via keyboard and press enter or space. Alternatively I could use a dropdown menu for this but I wanted to use the same code for both right click and left click menu.

[sroucheray]

So "autofocus" is not really what you need I guess but a mean to use the same menu template for context menu and a dropdown menu, isn't it ?

It's true that a context menu and a dropdown menu have some things in common:

• They open as an overlay
• They both are menus so they can use navigation keys (down, up, enter...), they have actions on menu items...

They also have some differences:

• Where they open
  • Context Menu opens at the mouse position or next to the element when opened with the Menu key event
  • Dropdown Menu opens below an HTML element position
• How they open
  • Context Menu opens with a right click or a context menu key event
  • Dropdown Menu opens with a click on an HTML element (usually a button) or any actions that trigger the button when it is focused (Enter and Space keys)

Given those clarifications, how would you see an evolution of the context menu ? Another directive ? An new option ? Maybe we could get some inspiration from dropdown menus out there ? Do you use some ?

[Timmeeeey]

I think you're right. These are two different things. Actually I haven't tried to use a dropdown menu. I will try to create a component which will use the same menu items as my context menu component.

But there is another case which doesn't work. I use Ignite UI framework. When I right click on a row in the grid the grid cell stays focused. When I click arrow down the cell selection changes instead of the menu item.

https://stackblitz.com/edit/angular-ivy-w1dtu7

[sroucheray]

OK then, can you open another bug please, since this is a different issue. It will help keeping this thread cleaned and opened to the specific discussion about context vs dropdown menus. Thanks !

[Timmeeeey]

I could open another bug but it is also related to the autofocus feature.

[sroucheray]

You have several challenges here. First you have two libraries that have their own way of handling key bindings when their element is focused.

You must find a way to escape from the grid key binding handling when the menu is opened and come back to the grid when the menu is closed. One way of doing this is https://stackblitz.com/edit/angular-ivy-5votkx?file=src/app/app.component.ts This is far from being totally functional but the idea is that instead of having to implement an autoFocus options which make little sense here, you can simply blur the activeElement with the grid.

[Timmeeeey]

Thanks for this example. I think I will use this in my project.