Set focus to the context menu when it's opened

[isaacplmann]

Set focus to the context menu when it's opened

[isaacplmann]

This has been implemented in 1.2.0

[isaacplmann]

Which specific element should the focus be applied to? The <ul>, the first <li>, or the <a>/<span> inside the first <li>?

[Yura13]

I think the focus should apply to <ul>

[Yura13]

I tested yours changes here(https://isaacplmann.github.io/ngx-contextmenu/). But up and down keys don't work for navigation inside the context menu.

[isaacplmann]

Correct. To navigate with the keyboard, you need to use tab, shift-tab, enter and esc. I spent about a half hour trying to get arrow keys to work and then backed out those changes because it was getting really complicated.

[Yura13]

I understand. Do you plan to do this navigation in the future?

[isaacplmann]

Probably not. Unless I figure out how to do it in a simple and maintainable way. tab and shift-tab work by using the browser's built in mechanism for changing focus - which I couldn't figure out a way to tap into.

[Yura13]

@isaacplmann
I prepared pull request with navigation inside context menu #35
In my opinion, after merging this changes autofocus should be removed.

[isaacplmann]

Thanks for the contribution! I'll take a look.

[isaacplmann]

PR #35 is incorporated into version 1.3.0.

[Yura13]

When using context menu with Bootstrap 4, class 'active' don't apply to item inside a menu. I found that you use bootstrap 3. The workaround for Bootstrap 4 is below:

body {
  context-menu-content {
    .dropdown-menu {
      .active {
        .dropdown-item {
          color: #fff;
          text-decoration: none;
          background-color: #0275d8;
        }
      }
    }
  }
}

[isaacplmann]

It looks like bootstrap 4 expects .dropdown-menu to have child .dropdown-items that then have .active class applied to them. I'm missing the .dropdown-item class. I'll add that to the template.

[Yura13]

There are used .dropdown-item:active for styling item

[Yura13]

Also, focus and navigation are async. Tabbing through disabled item is correct flow, or not.

[isaacplmann]

Yes, I don't plan to try to synchronize tab focus and the keyboard navigation. This way you can tab through available links just like normal - I'm not hijacking the tab key at all.

[isaacplmann]

If you don't like the focus, just turn off autoFocus.

[isaacplmann]

This should be fixed in 1.3.1