Merged PR 356: #1074 Focus Searchbar after Click on Clear Button

#1074 Focus Searchbar after Click on Clear Button

Related work items: #1074

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

@@ -0,0 +1,65 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormControl } from '@angular/forms';
+import { provideMockStore } from '@ngrx/store/testing';
+import { NgxsModule } from '@ngxs/store';
+import { SearchStateFacade } from '@shelf-store';
+import { AbholfachService } from '@swagger/oms';
+import { ProcessState } from 'apps/sales/src/app/core/store/state/process.state';
+import { ShelfSearchbarComponent } from './searchbar.component';
+import { ShelfSearchBarModule } from './searchbar.module';
+
+class MockSearchFacade {}
+class MockAbholfachService {}
+
+fdescribe('SearchbarComponent', () => {
+  let fixture: ComponentFixture<ShelfSearchbarComponent>;
+  let component: ShelfSearchbarComponent;
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      imports: [
+        ShelfSearchBarModule,
+        HttpClientTestingModule,
+        NgxsModule.forRoot([]),
+        NgxsModule.forFeature([ProcessState]),
+      ],
+      providers: [
+        provideMockStore(),
+        {
+          provide: SearchStateFacade,
+          useClass: MockSearchFacade,
+        },
+        {
+          provide: AbholfachService,
+          useClass: MockAbholfachService,
+        },
+      ],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ShelfSearchbarComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should be created', () => {
+    expect(component instanceof ShelfSearchbarComponent).toBeTruthy();
+  });
+
+  describe('resetForm', () => {
+    it('should reset focus on the searchbar', () => {
+      fixture.detectChanges();
+
+      spyOn(component.searchForm, 'reset').and.callFake(() => {});
+      spyOn(component.reset, 'emit').and.callFake(() => {});
+      spyOn<any>(component, 'focusSearchbar').and.callFake(() => {});
+
+      component.resetForm();
+
+      expect(component.searchForm.reset).toHaveBeenCalledTimes(1);
+      expect(component.reset.emit).toHaveBeenCalledTimes(1);
+      expect(component['focusSearchbar']).toHaveBeenCalledTimes(1);
+    });
+  });
+});

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

@@ -1,4 +1,14 @@
-import { Component, Input, OnInit, OnDestroy, Output, EventEmitter, ChangeDetectionStrategy, ViewChild, ElementRef } from '@angular/core';
+import {
+  Component,
+  Input,
+  OnInit,
+  OnDestroy,
+  Output,
+  EventEmitter,
+  ChangeDetectionStrategy,
+  ViewChild,
+  ElementRef,
+} from '@angular/core';
 import { Subject, Observable } from 'rxjs';
 import { isNullOrUndefined } from 'util';
 import { FormControl } from '@angular/forms';
@@ -13,14 +23,19 @@ export class ShelfSearchbarComponent implements OnInit, OnDestroy {
   searchForm: FormControl;
   searchQuery$: Observable<string>;
 
-  @ViewChild('submitButton', { static: false }) submitButton: ElementRef<HTMLButtonElement>;
-  @ViewChild('searchbar', { static: false }) searchbar: ElementRef<HTMLInputElement>;
+  @ViewChild('submitButton', { static: false }) submitButton: ElementRef<
+    HTMLButtonElement
+  >;
+  @ViewChild('searchbar', { static: false }) searchbar: ElementRef<
+    HTMLInputElement
+  >;
 
   @Input() isIPad = false;
   @Input() isFetchingData = false;
   @Input() mode: 'standalone' | 'autocomplete' = 'standalone';
   @Input() errorMessage = '';
-  @Input() placeholder = 'Kundenname, Abholfach, Abholschein, Kundenkartennummer';
+  @Input() placeholder =
+    'Kundenname, Abholfach, Abholschein, Kundenkartennummer';
   @Output() change = new EventEmitter<string>();
   @Output() reset = new EventEmitter<void>();
   @Output() search = new EventEmitter<{
@@ -49,6 +64,7 @@ export class ShelfSearchbarComponent implements OnInit, OnDestroy {
   resetForm() {
     this.searchForm.reset();
     this.reset.emit();
+    this.focusSearchbar();
   }
 
   setError(message: string) {
@@ -64,7 +80,9 @@ export class ShelfSearchbarComponent implements OnInit, OnDestroy {
       return this.triggerScan();
     }
 
-    const isValidInput = this.validateSearchInputBeforeSubmit(this.searchForm.value);
+    const isValidInput = this.validateSearchInputBeforeSubmit(
+      this.searchForm.value
+    );
 
     if (!isValidInput) {
       return;
@@ -88,14 +106,10 @@ export class ShelfSearchbarComponent implements OnInit, OnDestroy {
 
   setFocus(target: 'input' | 'button') {
     if (target === 'button') {
-      if (this.submitButton && this.submitButton.nativeElement) {
-        return this.submitButton.nativeElement.focus();
-      }
+      this.focusButton();
     }
     if (target === 'input') {
-      if (this.searchbar && this.searchbar.nativeElement) {
-        setTimeout(() => this.searchbar.nativeElement.focus(), 1000);
-      }
+      setTimeout(() => this.focusSearchbar(), 1000);
     }
   }
 
@@ -119,4 +133,16 @@ export class ShelfSearchbarComponent implements OnInit, OnDestroy {
   private isNumberOrLetter(key: string): boolean {
     return key.includes('Digit') || key.includes('Key');
   }
+
+  private focusSearchbar() {
+    if (this.searchbar && this.searchbar.nativeElement) {
+      this.searchbar.nativeElement.focus();
+    }
+  }
+
+  private focusButton() {
+    if (this.submitButton && this.submitButton.nativeElement) {
+      this.submitButton.nativeElement.focus();
+    }
+  }
 }