feat: allow opening the menu with a keyboard shortcut

Author: luisferreira90

demo/demo.component.ts

@@ -34,6 +34,7 @@ const names = [
         rows="5"
         [(ngModel)]="formControlValue"
         mwlTextInputAutocomplete
+        [keyboardShortcut]="shortcut"
         [findChoices]="findChoices"
         [getChoiceLabel]="getChoiceLabel">
       </textarea>
@@ -52,4 +53,8 @@ export class DemoComponent {
   getChoiceLabel(choice: string) {
     return `@${choice} `;
   }
+
+  shortcut(event: KeyboardEvent): boolean {
+    return (event.keyCode === 32 || event.code === '32') && event.ctrlKey;
+  }
 }

src/text-input-autocomplete.directive.ts

@@ -36,6 +36,11 @@ export class TextInputAutocompleteDirective implements OnDestroy {
    */
   @Input() triggerCharacter = '@';
 
+  /**
+   * An optional keyboard shortcut that will trigger the menu to appear
+   */
+  @Input() keyboardShortcut: (event: KeyboardEvent) => boolean;
+
   /**
    * The regular expression that will match the search text after the trigger character
    */
@@ -88,6 +93,8 @@ export class TextInputAutocompleteDirective implements OnDestroy {
 
   private menuHidden$ = new Subject();
 
+  private usingShortcut = false;
+
   constructor(
     private componentFactoryResolver: ComponentFactoryResolver,
     private viewContainerRef: ViewContainerRef,
@@ -98,24 +105,42 @@ export class TextInputAutocompleteDirective implements OnDestroy {
   @HostListener('keypress', ['$event.key'])
   onKeypress(key: string) {
     if (key === this.triggerCharacter) {
+      this.usingShortcut = false;
+      this.showMenu();
+    }
+  }
+
+  @HostListener('keydown', ['$event'])
+  onKeyDown(event: KeyboardEvent) {
+    if (this.keyboardShortcut && this.keyboardShortcut(event)) {
+      this.usingShortcut = true;
       this.showMenu();
+      this.onChange('');
     }
   }
 
   @HostListener('input', ['$event.target.value'])
   onChange(value: string) {
     if (this.menu) {
-      if (value[this.menu.triggerCharacterPosition] !== this.triggerCharacter) {
+      if (
+        value[this.menu.triggerCharacterPosition] !== this.triggerCharacter &&
+        !this.usingShortcut
+      ) {
         this.hideMenu();
       } else {
         const cursor = this.elm.nativeElement.selectionStart;
         if (cursor < this.menu.triggerCharacterPosition) {
           this.hideMenu();
         } else {
+          if (this.usingShortcut && !this.menu) {
+            value = this.triggerCharacter;
+          }
+          const offset = this.usingShortcut ? 0 : 1;
           const searchText = value.slice(
-            this.menu.triggerCharacterPosition + 1,
+            this.menu.triggerCharacterPosition + offset,
             cursor
           );
+
           if (!searchText.match(this.searchRegexp)) {
             this.hideMenu();
           } else {

test/text-input-autocomplete.directive.spec.ts

@@ -25,6 +25,7 @@ import { By } from '@angular/platform-browser';
         [findChoices]="findChoices"
         [getChoiceLabel]="getChoiceLabel"
         [triggerCharacter]="triggerCharacter"
+        [keyboardShortcut]="shortcut"
         [searchRegexp]="searchRegexp"
         [menuComponent]="menuComponent"
         [closeMenuOnBlur]="closeMenuOnBlur"
@@ -46,6 +47,8 @@ class TestComponent {
   menuHidden = sinon.spy();
   choiceSelected = sinon.spy();
   closeMenuOnBlur = false;
+  shortcut = (event: KeyboardEvent) =>
+    (event.keyCode === 32 || event.code === '32') && event.ctrlKey;
 }
 
 @Component({
@@ -130,6 +133,15 @@ describe('text-input-autocomplete directive', () => {
     expect(getMenu()).to.be.ok;
   });
 
+  it('should show a menu when the shortcut combo is typed', () => {
+    const event = new KeyboardEvent('keydown', {
+      code: '32',
+      ctrlKey: true
+    });
+    textarea.nativeElement.dispatchEvent(event);
+    expect(getMenu()).to.be.ok;
+  });
+
   it('should call find choices with the search text', () => {
     typeInTextarea('test @derp');
     expect(component.findChoices).to.have.been.calledWith('derp');