feat: trigger search on enter

libs/portal-integration-angular/src/lib/core/components/search-header/search-header.component.html

@@ -4,7 +4,7 @@
   [actions]="headerActions"
 >
   <div class="search-criteria-container">
-    <div>
+    <div #searchParameterFields>
       <ng-content></ng-content>
       <div class="search-criteria-buttons">
         <p-button

libs/portal-integration-angular/src/lib/core/components/search-header/search-header.component.ts

@@ -1,12 +1,18 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core'
 import { Action } from '../page-header/page-header.component'
 
+/**
+ * To trigger the search when Enter key is pressed inside a search parameter field,
+ * an EventListener for keyup enter event is added for HTML elements which have an input.
+ * Please add the EventListener yourself manually, if you want to have that functionality for some other elements
+ * which do not have an input element.
+ */
 @Component({
   selector: 'ocx-search-header',
   templateUrl: './search-header.component.html',
   styleUrls: ['./search-header.component.scss'],
 })
-export class SearchHeaderComponent {
+export class SearchHeaderComponent implements AfterViewInit {
   @Input() headline = ''
   @Input() manualBreadcrumbs = false
   _actions: Action[] = []
@@ -22,13 +28,20 @@ export class SearchHeaderComponent {
   @Output() searched: EventEmitter<any> = new EventEmitter()
   @Output() resetted: EventEmitter<any> = new EventEmitter()
 
+  @ViewChild('searchParameterFields') searchParameterFields: ElementRef | undefined
+
   viewMode: 'basic' | 'advanced' = 'basic'
   hasAdvanced = false
   headerActions: Action[] = []
 
+  ngAfterViewInit(): void {
+    this.addKeyUpEventListener()
+  }
+
   toggleViewMode() {
     this.viewMode = this.viewMode === 'basic' ? 'advanced' : 'basic'
     this.updateHeaderActions()
+    setTimeout(() => this.addKeyUpEventListener())
   }
 
   onResetClicked() {
@@ -54,4 +67,20 @@ export class SearchHeaderComponent {
     }
     this.headerActions = headerActions.concat(this.actions)
   }
+
+  addKeyUpEventListener() {
+    const inputElements = this.searchParameterFields?.nativeElement.querySelectorAll('input')
+    inputElements.forEach((inputElement: any) => {
+      if (!inputElement.listenerAdded) {
+        inputElement.addEventListener('keyup', (event: any) => this.onSearchKeyup(event))
+        inputElement.listenerAdded = true
+      }
+    })
+  }
+
+  onSearchKeyup(event: any) {
+    if (event.code === 'Enter') {
+      this.onSearchClicked()
+    }
+  }
 }

package.json

@@ -30,7 +30,7 @@
     "ngx-color": "^8.0.3",
     "primeflex": "^3.3.0",
     "primeicons": "^6.0.1",
-    "primeng": "~15.2.1",
+    "primeng": "^15.2.1",
     "rxjs": "7.8.1",
     "tslib": "^2.5.0",
     "zod": "^3.22.1",