add keyboard handling

Author: xelaint

apps/daffio/src/app/docs/search/components/search-modal/search-modal.component.ts

@@ -38,6 +38,9 @@ import { DaffioDocsSearchFooterComponent } from '../search-footer/search-footer.
   templateUrl: './search-modal.component.html',
   styleUrl: './search-modal.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '(keydown)': 'onKeydown($event)',
+  },
   imports: [
     DaffioDocsSearchFieldComponent,
     DaffioDocsSearchResultItemDirective,
@@ -78,5 +81,26 @@ export class DaffioDocsSearchModalComponent implements AfterViewInit, OnInit {
 
   ngAfterViewInit() {
     this.keyManager = new ActiveDescendantKeyManager(this.items).withWrap();
+
+    this.items.changes.subscribe(() => {
+      if (this.items.length > 0) {
+        this.keyManager.setFirstItemActive();
+      }
+    });
+
+    if (this.items.length > 0) {
+      this.keyManager.setFirstItemActive();
+    }
+  }
+
+  onKeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      const activeItem = this.keyManager.activeItem;
+      if (activeItem) {
+        activeItem.click();
+      }
+    } else {
+      this.keyManager.onKeydown(event);
+    }
   }
 }

apps/daffio/src/app/docs/search/directives/search-result-item/search-result-item.directive.ts

@@ -1,6 +1,7 @@
 import { Highlightable } from '@angular/cdk/a11y';
 import {
   Directive,
+  ElementRef,
   HostBinding,
 } from '@angular/core';
 
@@ -17,11 +18,20 @@ export class DaffioDocsSearchResultItemDirective implements Highlightable {
     return this._isActive;
   };
 
+  constructor(private elementRef: ElementRef<HTMLElement>) {}
+
   setActiveStyles() {
     this._isActive = true;
   };
 
   setInactiveStyles() {
     this._isActive = false;
   }
+
+  click() {
+    const link = this.elementRef.nativeElement.querySelector('a');
+    if (link) {
+      link.click();
+    }
+  }
 }