fix(filter-field): Fixes an issue where options set on an async autoc…

…omplete are shown.
dynatrace-oss · Feb 7, 2020 · 90e2428 · 90e2428
1 parent 7faee84
commit 90e2428
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 6 deletions.
diff --git a/apps/components-e2e/src/components/filter-field/filter-field.po.ts b/apps/components-e2e/src/components/filter-field/filter-field.po.ts
@@ -36,9 +36,8 @@ export function clickOption(
   const controller = testController || t;
 
   return controller
-    .click(filterField)
-    .wait(150)
-    .click(option(nth));
+    .click(filterField, { speed: 0.3 })
+    .click(option(nth), { speed: 0.3 });
 }
 
 /** Focus the input of the filter field to send key events to it. */

diff --git a/apps/dev/src/filter-field/testdata.ts b/apps/dev/src/filter-field/testdata.ts
@@ -47,7 +47,7 @@ export const TEST_DATA = {
       name: 'DE (async)',
       async: true,
       distinct: false,
-      autocomplete: [],
+      autocomplete: [{ name: 'Berlin' }],
     },
     {
       name: 'DE (async, distinct)',

diff --git a/components/filter-field/src/filter-field.spec.ts b/components/filter-field/src/filter-field.spec.ts
@@ -80,6 +80,11 @@ const TEST_DATA = {
       suggestions: [],
       validators: [],
     },
+    {
+      name: 'DE (async)',
+      async: true,
+      autocomplete: [{ name: 'Berlin' }],
+    },
   ],
 };
 
@@ -317,7 +322,7 @@ describe('DtFilterField', () => {
 
       const options = getOptions(overlayContainerElement);
       const optionGroups = getOptionGroups(overlayContainerElement);
-      expect(options.length).toBe(3);
+      expect(options.length).toBe(4);
       expect(optionGroups.length).toBe(0);
       expect(options[0].textContent).toContain('AUT');
       expect(options[1].textContent).toContain('USA');
@@ -745,6 +750,23 @@ describe('DtFilterField', () => {
       expect(document.activeElement).toBe(input);
       expect(trigger.panelOpen).toBe(false);
     }));
+
+    it('should not show options if the autocomplete is marked as async', fakeAsync(() => {
+      filterField.focus();
+      zone.simulateMicrotasksEmpty();
+      zone.simulateZoneExit();
+      fixture.detectChanges();
+
+      let options = getOptions(overlayContainerElement);
+      const asyncOption = options[3];
+      asyncOption.click();
+      zone.simulateMicrotasksEmpty();
+      fixture.detectChanges();
+
+      options = getOptions(overlayContainerElement);
+
+      expect(options.length).toBe(0);
+    }));
   });
 
   describe('with range option', () => {

diff --git a/components/filter-field/src/filter-field.ts b/components/filter-field/src/filter-field.ts
@@ -1102,7 +1102,10 @@ export class DtFilterField<T> implements AfterViewInit, OnDestroy, OnChanges {
   private _updateAutocompleteOptionsOrGroups(): void {
     const currentDef = this._currentDef;
 
-    if (isDtAutocompleteDef(currentDef)) {
+    if (
+      isDtAutocompleteDef(currentDef) &&
+      !isAsyncDtAutocompleteDef(currentDef)
+    ) {
       const def = filterAutocompleteDef(
         currentDef,
         this._getSelectedOptionIds(),