Merged PR 383: #982 Shelf Searchbar - Listen for keycode instead of Enter Event

#982 Shelf Searchbar - Listen for keycode instead of Enter Event

(iOS Keyboard does not emit Enter Event)

Related work items: #982

apps/sales/src/app/modules/shelf/components/searchbar/searchbar.component.html

@@ -10,8 +10,7 @@
     name="shelf-search"
     id="shelf-search-input"
     [formControl]="searchForm"
-    (keyup.enter)="triggerSearch('search')"
-    (keyup)="onInput($event)"
+    (keyup)="onKeyup($event)"
   />
   <span class="isa-input-warning" *ngIf="!!errorMessage?.length">{{
     errorMessage

apps/sales/src/app/modules/shelf/components/searchbar/searchbar.component.spec.ts

@@ -1,6 +1,6 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormControl } from '@angular/forms';
+import { By } from '@angular/platform-browser';
 import { provideMockStore } from '@ngrx/store/testing';
 import { NgxsModule } from '@ngxs/store';
 import { SearchStateFacade } from '@shelf-store';
@@ -62,4 +62,42 @@ fdescribe('SearchbarComponent', () => {
       expect(component['focusSearchbar']).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe('onKeyup', () => {
+    const getInput = () =>
+      fixture.debugElement.query(By.css('#shelf-search-input'));
+
+    beforeEach(() => {
+      spyOn(component, 'onKeyup').and.callThrough();
+      spyOn(component, 'triggerSearch').and.callFake(() => {});
+      spyOn(component, 'onInput').and.callFake(() => {});
+    });
+
+    it('should be called when the input emits the native keyup event', () => {
+      fixture.detectChanges();
+      const event = { keyCode: 13 };
+
+      getInput().triggerEventHandler('keyup', event);
+
+      expect(component.onKeyup).toHaveBeenCalledWith(event);
+    });
+
+    it('should call trigger search on Enter Input', () => {
+      fixture.detectChanges();
+      const event = { keyCode: 13 };
+
+      getInput().triggerEventHandler('keyup', event);
+
+      expect(component.triggerSearch).toHaveBeenCalledWith('search');
+    });
+
+    it('should call onInput if it is not a Enter Event', () => {
+      fixture.detectChanges();
+      const event = { keyCode: 1 };
+
+      getInput().triggerEventHandler('keyup', event);
+
+      expect(component.onInput).toHaveBeenCalledWith(event);
+    });
+  });
 });

apps/sales/src/app/modules/shelf/components/searchbar/searchbar.component.ts

@@ -98,6 +98,14 @@ export class ShelfSearchbarComponent implements OnInit, OnDestroy {
     this.scan.emit();
   }
 
+  onKeyup(event: KeyboardEvent) {
+    if (this.isEnterEvent(event)) {
+      this.triggerSearch('search');
+    } else {
+      this.onInput(event);
+    }
+  }
+
   onInput(event: KeyboardEvent) {
     if (!this.isNumberOrLetter(event.key)) {
       this.change.emit(this.searchForm.value);
@@ -134,6 +142,12 @@ export class ShelfSearchbarComponent implements OnInit, OnDestroy {
     return key.includes('Digit') || key.includes('Key');
   }
 
+  private isEnterEvent(event: KeyboardEvent): boolean {
+    // keycode check required for iPad (no Enter Event is dispatched)
+    // tslint:disable-next-line: deprecation
+    return event.keyCode === 13;
+  }
+
   private focusSearchbar() {
     if (this.searchbar && this.searchbar.nativeElement) {
       this.searchbar.nativeElement.focus();