From d25f2adce2a2d0523f55f4dde6a9371145f7b0df Mon Sep 17 00:00:00 2001
From: Cherkasov <sam.cherkasov@dynatrace.com>
Date: Fri, 6 Aug 2021 12:57:41 +0200
Subject: [PATCH] feat(filter-field): Add disable state to the option without
 group

---
 apps/dev/src/filter-field/testdata.ts         |  2 +-
 .../filter-field/src/filter-field.html        |  1 +
 .../filter-field/src/filter-field.spec.ts     | 45 +++++++++++++++++++
 3 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/apps/dev/src/filter-field/testdata.ts b/apps/dev/src/filter-field/testdata.ts
index baafc81ef4..64799f9081 100644
--- a/apps/dev/src/filter-field/testdata.ts
+++ b/apps/dev/src/filter-field/testdata.ts
@@ -179,7 +179,7 @@ export const TEST_DATA_PARTIAL_2 = {
     { name: 'Zug' },
     { name: 'Schaffhausen' },
     { name: 'Luzern' },
-    { name: 'St. Gallen' },
+    { name: 'St. Gallen (disabled)', disabled: true },
   ],
   partial: true,
 };
diff --git a/libs/barista-components/filter-field/src/filter-field.html b/libs/barista-components/filter-field/src/filter-field.html
index 63b1fa5020..80cad5280d 100644
--- a/libs/barista-components/filter-field/src/filter-field.html
+++ b/libs/barista-components/filter-field/src/filter-field.html
@@ -124,6 +124,7 @@
           <ng-template #options>
             <dt-option
               [value]="optionOrGroupDef"
+              [disabled]="optionOrGroupDef.option!.disabled"
               [attr.title]="_getTitle(optionOrGroupDef.option)"
             >
               <dt-highlight [term]="_inputValue">{{
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 b13afa6c52..48d5b330ac 100644
--- a/libs/barista-components/filter-field/src/filter-field.spec.ts
+++ b/libs/barista-components/filter-field/src/filter-field.spec.ts
@@ -1185,6 +1185,51 @@ describe('DtFilterField', () => {
       expect(options[3].textContent).toContain('St. Gallen');
     }));
 
+    it('should disable partial autocomplete option without a group', fakeAsync(() => {
+      const DATA = {
+        autocomplete: [
+          {
+            name: 'CH (async, partial)',
+            async: true,
+            autocomplete: [],
+          },
+        ],
+      };
+
+      const DATA_PARTIAL = {
+        name: 'CH (async, partial)',
+        autocomplete: [{ name: 'Zürich', disabled: true }],
+        partial: true,
+      };
+
+      fixture.componentInstance.dataSource.data = DATA;
+      fixture.detectChanges();
+      filterField.focus();
+      advanceFilterfieldCycle(true, true);
+
+      getAndClickOption(overlayContainerElement, 0);
+
+      let options = getOptions(overlayContainerElement);
+      expect(options).toHaveLength(0);
+
+      let hintPanel = getPartialResultsHintPanel(overlayContainerElement);
+      expect(hintPanel).toBeNull();
+
+      fixture.componentInstance.dataSource.data = DATA_PARTIAL;
+      fixture.detectChanges();
+      advanceFilterfieldCycle(true, true);
+      tick();
+
+      hintPanel = getPartialResultsHintPanel(overlayContainerElement);
+      expect(hintPanel).not.toBeNull();
+
+      options = getOptions(overlayContainerElement);
+      expect(options).toHaveLength(1);
+
+      // dt-option-disabled
+      expect(options[0].getAttribute('class')).toContain('dt-option-disabled');
+    }));
+
     it('should mark the input as readonly while loading async data', () => {
       const DATA = {
         autocomplete: [