From 7b593b7635897a1de53543228fcdc5ce14b92347 Mon Sep 17 00:00:00 2001
From: Thomas Pink <thomas.pink@me.com>
Date: Thu, 13 Aug 2020 12:18:03 +0200
Subject: [PATCH] fix(filter-field): Fixes an issue where the user can interact
 while in loading state.

Fixes #1464
---
 .../filter-field/src/filter-field.html        |  1 +
 .../filter-field/src/filter-field.spec.ts     | 42 +++++++++++++++++++
 .../filter-field/src/filter-field.ts          |  8 ++++
 3 files changed, 51 insertions(+)

diff --git a/libs/barista-components/filter-field/src/filter-field.html b/libs/barista-components/filter-field/src/filter-field.html
index 3bf103edb7..5fe36d1f62 100644
--- a/libs/barista-components/filter-field/src/filter-field.html
+++ b/libs/barista-components/filter-field/src/filter-field.html
@@ -39,6 +39,7 @@
       #input
       type="text"
       class="dt-filter-field-input"
+      [readonly]="loading"
       [attr.aria-label]="ariaLabel"
       [dtAutocomplete]="autocomplete"
       [dtAutocompleteDisabled]="!_autocompleteOptionsOrGroups.length || loading"
diff --git a/libs/barista-components/filter-field/src/filter-field.spec.ts b/libs/barista-components/filter-field/src/filter-field.spec.ts
index 877367e925..e332cf930f 100644
--- a/libs/barista-components/filter-field/src/filter-field.spec.ts
+++ b/libs/barista-components/filter-field/src/filter-field.spec.ts
@@ -953,6 +953,48 @@ describe('DtFilterField', () => {
       expect(options[0].textContent).toContain('Upper Austria');
       expect(options[1].textContent).toContain('Vienna');
     });
+
+    it('should mark the input as readonly while loading async data', () => {
+      const DATA = {
+        autocomplete: [
+          {
+            name: 'AUT',
+            async: true,
+            autocomplete: [],
+          },
+        ],
+      };
+      const ASYNC_DATA = {
+        name: 'AUT',
+        autocomplete: [
+          {
+            name: 'Linz',
+          },
+        ],
+      };
+
+      const input = getInput(fixture);
+
+      fixture.componentInstance.dataSource.data = DATA;
+      fixture.detectChanges();
+      filterField.focus();
+      advanceFilterfieldCycle();
+
+      // No readonly attribute should be present at the beginning.
+      expect(input.readOnly).toBeFalsy();
+
+      getAndClickOption(overlayContainerElement, 0);
+
+      // readonly should be added while waiting for the data to be loaded
+      expect(input.readOnly).toBeTruthy();
+
+      fixture.componentInstance.dataSource.data = ASYNC_DATA;
+      fixture.detectChanges();
+      advanceFilterfieldCycle(true, true);
+
+      // readonly should be removed after the async data is loaded
+      expect(input.readOnly).toBeFalsy();
+    });
   });
 
   describe('with range option', () => {
diff --git a/libs/barista-components/filter-field/src/filter-field.ts b/libs/barista-components/filter-field/src/filter-field.ts
index 5171adb388..6c7162d7c6 100644
--- a/libs/barista-components/filter-field/src/filter-field.ts
+++ b/libs/barista-components/filter-field/src/filter-field.ts
@@ -629,6 +629,10 @@ export class DtFilterField<T = any>
 
   /** @internal Keep track of the values in the input fields. Write the current value to the _inputValue property */
   _handleInputChange(): void {
+    if (this._loading) {
+      return;
+    }
+
     const value = this._inputEl.nativeElement.value;
     this._writeControlValue(value);
     this._updateAutocompleteOptionsOrGroups();
@@ -640,6 +644,10 @@ export class DtFilterField<T = any>
 
   /** @internal */
   _handleInputKeyDown(event: KeyboardEvent): void {
+    if (this._loading) {
+      return;
+    }
+
     const keyCode = _readKeyCode(event);
     if (keyCode === ENTER) {
       // We need to prevent the default here, in case this filter field