feat(autoFocus): Autofocus the context menu ul when it opens

README.md

@@ -238,6 +238,29 @@ export class AppModule {}
 <context-menu [useBootstrap4]="true"></context-menu>
 ```
 
+## AutoFocus
+
+You can optionally set focus on the context menu whenever it opens.  This enables a user to easily tab through the context menu items and press enter to select them.
+
+```js
+@NgModule({
+  import: [
+    ContextMenuModule.forRoot({
+      autoFocus: true,
+    }),
+  ],
+})
+export class AppModule {}
+```
+
+## Disable Context Menu
+
+If you need to disable the context menu, you can pass a `boolean` to the `[disabled]` input:
+
+```html
+<context-menu [disabled]="true"></context-menu>
+```
+
 ## Close event emitter
 
 There is a `(close)` output EventEmitter that you can subscribe to for notifications when the context menu closes (either by clicking outside or choosing a menu item).

src/demo/app.module.ts

@@ -13,7 +13,9 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule,
     CommonModule,
-    ContextMenuModule,
+    ContextMenuModule.forRoot({
+      autoFocus: true,
+    }),
     RouterModule.forRoot([
       {
         path: 'two',

src/lib/contextMenu.options.ts

@@ -1,6 +1,7 @@
 import { OpaqueToken } from '@angular/core';
 
 export interface IContextMenuOptions {
-  useBootstrap4: boolean;
+  useBootstrap4?: boolean;
+  autoFocus?: boolean;
 }
 export const CONTEXT_MENU_OPTIONS = new OpaqueToken('CONTEXT_MENU_OPTIONS');

src/lib/contextMenuContent.component.ts

@@ -4,6 +4,7 @@ import { ContextMenuItemDirective } from './contextMenu.item.directive';
 import { CONTEXT_MENU_OPTIONS, IContextMenuOptions } from './contextMenu.options';
 import { ContextMenuService } from './contextMenu.service';
 import {
+  AfterViewInit,
   ChangeDetectorRef,
   Component,
   ElementRef,
@@ -43,8 +44,8 @@ export interface MouseLocation {
      }`
   ],
   template:
-  `<div class="dropdown ngx-contextmenu">
-      <ul #menu [ngStyle]="locationCss" class="dropdown-menu">
+  `<div #menuwrapper class="dropdown ngx-contextmenu" tabindex="0">
+      <ul #menu [ngStyle]="locationCss" class="dropdown-menu" tabindex="0">
         <li *ngFor="let menuItem of menuItems" [class.disabled]="!isMenuItemEnabled(menuItem)"
             [class.divider]="menuItem.divider" [class.dropdown-divider]="useBootstrap4 && menuItem.divider"
             [attr.role]="menuItem.divider ? 'separator' : undefined">
@@ -64,12 +65,14 @@ export interface MouseLocation {
     </div>
   `,
 })
-export class ContextMenuContentComponent implements OnInit, OnDestroy {
+export class ContextMenuContentComponent implements OnInit, OnDestroy, AfterViewInit {
   @Input() public menuItems: ContextMenuItemDirective[] = [];
   @Input() public item: any;
   @Input() public event: MouseEvent;
+  @ViewChild('menuwrapper') public menuWrapperElement: ElementRef;
   @ViewChild('menu') public menuElement: ElementRef;
 
+  public autoFocus = false;
   public useBootstrap4 = false;
   public isShown = false;
   public isOpening = false;
@@ -84,6 +87,7 @@ export class ContextMenuContentComponent implements OnInit, OnDestroy {
     public renderer: Renderer,
   ) {
     if (options) {
+      this.autoFocus = options.autoFocus;
       this.useBootstrap4 = options.useBootstrap4;
     }
   }
@@ -132,6 +136,12 @@ export class ContextMenuContentComponent implements OnInit, OnDestroy {
     });
   }
 
+  ngAfterViewInit() {
+    if (this.autoFocus) {
+      setTimeout(() => this.menuElement.nativeElement.focus());
+    }
+  }
+
   ngOnDestroy() {
     this.subscription.unsubscribe();
   }