fix(filter-field): Fixes an issue where the user can interact while i…

…n loading state.

Fixes #1464

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"

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', () => {

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