#863 Hide Autocomplete Results on Click Outside

apps/sales/src/app/modules/shelf/pages/shelf-search/search/search-input.component.spec.ts

@@ -14,6 +14,7 @@ import {
 import { ShelfSearchInputComponent } from './search-input.component';
 import { ShelfFilterService } from '../../../services';
 import { ShelfSearchbarComponent } from '../../../components';
+import { By } from '@angular/platform-browser';
 
 class MockSearchStateFacade {
   constructor() {}
@@ -147,4 +148,50 @@ fdescribe('#SearchInputComponent', () => {
 
     expect(component.searchbar.setInputValue).toHaveBeenCalledWith('Testsuche');
   }));
+
+  describe('onClickOutside', () => {
+    let searchbar: HTMLElement;
+
+    beforeEach(() => {
+      searchbar = fixture.debugElement.query(By.css('app-shelf-searchbar'))
+        .nativeElement;
+      spyOn(component, 'onClickOutside').and.callThrough();
+      spyOn(component.showAutocompleteResults$, 'next').and.callThrough();
+    });
+
+    it('should set showAutocompleteResult to false', () => {
+      component.onClickOutside();
+      fixture.detectChanges();
+
+      expect(component.showAutocompleteResults$.next).toHaveBeenCalledWith(
+        false
+      );
+    });
+
+    it('should be called when clicking outside', () => {
+      searchbar.dispatchEvent(new Event('clickOutside'));
+      fixture.detectChanges();
+
+      expect(component.showAutocompleteResults$.next).toHaveBeenCalledWith(
+        false
+      );
+    });
+  });
+
+  describe('searchbar', () => {
+    let searchbar: HTMLElement;
+
+    beforeEach(() => {
+      searchbar = fixture.debugElement.query(By.css('app-shelf-searchbar'))
+        .nativeElement;
+    });
+
+    it('should be in the component', () => {
+      expect(searchbar).toBeTruthy();
+    });
+
+    it('should have the ClickOutsideDirective', () => {
+      expect(searchbar.hasAttribute('clickOutside')).toBeTruthy();
+    });
+  });
 });

apps/sales/src/app/modules/shelf/pages/shelf-search/search/search-input.component.ts

@@ -14,6 +14,7 @@ import {
   of,
   NEVER,
   asyncScheduler,
+  combineLatest,
 } from 'rxjs';
 import {
   ShelfSearchFacadeService,
@@ -68,6 +69,7 @@ export class ShelfSearchInputComponent
 
   autocompleteQueryString$ = new BehaviorSubject<string>(null);
   autocompleteResult$: Observable<AutocompleteDTO[]>;
+  showAutocompleteResults$ = new BehaviorSubject<boolean>(true);
 
   searchMode$: Observable<'standalone' | 'autocomplete'>;
 
@@ -179,11 +181,11 @@ export class ShelfSearchInputComponent
   }
 
   onClickOutside() {
-    // TODO handle close autocompete
-    console.log('Close Autocomplete');
+    this.showAutocompleteResults$.next(false);
   }
 
   private updateSearchQuery(searchQuery: string) {
+    this.showAutocompleteResults$.next(true);
     this.autocompleteQueryString$.next(searchQuery);
   }
 
@@ -231,10 +233,16 @@ export class ShelfSearchInputComponent
   }
 
   private setUpSearchMode() {
-    this.searchMode$ = this.autocompleteResult$.pipe(
-      map((result) =>
-        !!result && !!result.length ? 'autocomplete' : 'standalone'
-      )
+    this.searchMode$ = combineLatest([
+      this.autocompleteResult$,
+      this.showAutocompleteResults$,
+    ]).pipe(
+      map(([result, showResult]) => {
+        if (!result || !result.length || !showResult) {
+          return 'standalone';
+        }
+        return 'autocomplete';
+      })
     );
   }