Hide autocomplete list when a page/window is scrolled

Author: alextanlan

ddp-workspace/projects/ddp-sdk/src/lib/components/activityForm/picklist/autocompleteActivityPicklistQuestion.component.ts

@@ -1,5 +1,15 @@
-import { Component, Inject, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import {
+    Component,
+    HostListener,
+    Inject,
+    OnChanges,
+    OnDestroy,
+    OnInit,
+    SimpleChanges,
+    ViewChild
+} from '@angular/core';
 import { FormControl } from '@angular/forms';
+import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import { Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map, startWith, takeUntil } from 'rxjs/operators';
 
@@ -44,12 +54,13 @@ import { ConfigurationService } from '../../../services/configuration.service';
     `]
 })
 export class AutocompleteActivityPicklistQuestion extends BaseActivityPicklistQuestion implements OnInit, OnDestroy, OnChanges {
-    private readonly ngUnsubscribe = new Subject();
+    @ViewChild(MatAutocompleteTrigger, {read: MatAutocompleteTrigger}) autoComplete: MatAutocompleteTrigger;
 
     filteredGroups: ActivityPicklistNormalizedGroup[] = [];
     // options w/o a group
     filteredOptions: ActivityPicklistOption[] = [];
     inputFormControl = new FormControl();
+    private readonly ngUnsubscribe = new Subject();
 
     constructor(
         translate: NGXTranslateService,
@@ -169,4 +180,10 @@ export class AutocompleteActivityPicklistQuestion extends BaseActivityPicklistQu
     displayAutoComplete(option: ActivityPicklistOption | string): string {
         return typeof option === 'string' ? option : (option?.optionLabel || '');
     }
+
+    @HostListener('window: scroll') public onWindowScroll(): void {
+        if (this.autoComplete?.panelOpen) {
+            this.autoComplete.closePanel();
+        }
+    }
 }