feat: add ctrl+f as hotkey to focus search field

4gray · Dec 18, 2020 · cad162d · cad162d
1 parent 4abaeae
commit cad162d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/src/app/player/components/channel-list-container/channel-list-container.component.html b/src/app/player/components/channel-list-container/channel-list-container.component.html
@@ -4,6 +4,7 @@
             <mat-list-item>
                 <mat-form-field class="full-width">
                     <input
+                        #search
                         matInput
                         placeholder="Search channel ({{
                             _channelList?.length

diff --git a/src/app/player/components/channel-list-container/channel-list-container.component.ts b/src/app/player/components/channel-list-container/channel-list-container.component.ts
@@ -1,4 +1,10 @@
-import { Component, Input } from '@angular/core';
+import {
+    Component,
+    ElementRef,
+    HostListener,
+    Input,
+    ViewChild,
+} from '@angular/core';
 import { Channel, ChannelStore, ChannelQuery } from '../../../state';
 
 import * as _ from 'lodash';
@@ -44,6 +50,17 @@ export class ChannelListContainerComponent {
         name: '',
     };
 
+    /** Search field element */
+    @ViewChild('search') searchElement: ElementRef;
+
+    /** Register ctrl+f as keyboard hotkey to focus the search input field */
+    @HostListener('document:keypress', ['$event'])
+    handleKeyboardEvent(event: KeyboardEvent): void {
+        if (event.key === 'f' && event.ctrlKey) {
+            this.searchElement.nativeElement.focus();
+        }
+    }
+
     /**
      * Creates an instance of ChannelListContainerComponent
      * @param channelQuery akita's channel query