fix(filter-field): Improving isOptionSelected method for async values.

libs/barista-components/filter-field/src/filter-field-multi-select/filter-field-multi-select.ts

@@ -277,8 +277,11 @@ export class DtFilterFieldMultiSelect<T>
   }
 
   /** Check if option is selected */
-  _isOptionSelected(option: T): boolean {
-    return this._currentSelection.isSelected(option);
+  _isOptionSelected(option: T & DtNodeDef): boolean {
+    return this._currentSelection.selected.some(
+      (selected) =>
+        ((selected as unknown) as DtNodeDef).option?.uid === option.option?.uid,
+    );
   }
 
   private _checkApplyDisable(): void {

libs/barista-components/filter-field/src/filter-field-util.ts

@@ -520,7 +520,11 @@ export function applyDtOptionIds(
     // tslint:disable-next-line: no-parameter-reassignment
     prefix = peekOptionId(def, prefix, skipRootDef);
   }
-  if (isDtAutocompleteDef(def)) {
+  if (isDtMultiSelectDef(def)) {
+    for (const multiOption of def.multiSelect?.multiOptions ?? []) {
+      applyDtOptionIds(multiOption, prefix);
+    }
+  } else if (isDtAutocompleteDef(def)) {
     for (const optionOrGroup of def.autocomplete.optionsOrGroups) {
       applyDtOptionIds(optionOrGroup, prefix);
     }

libs/barista-components/filter-field/src/filter-field-with-multiselect.spec.ts

@@ -319,6 +319,70 @@ describe('DtFilterField', () => {
         // TODO
         expect(options.length).toBe(1);
       });
+
+      it('should load keep checked already selected options for async fields', () => {
+        const DATA = {
+          autocomplete: [
+            {
+              name: 'AUT',
+              multiOptions: [],
+              async: true,
+            },
+          ],
+        };
+        const ASYNC_DATA = {
+          name: 'AUT',
+          multiOptions: [
+            {
+              name: 'Linz',
+            },
+            {
+              name: 'Vienna',
+            },
+          ],
+        };
+
+        fixture.componentInstance.dataSource.data = DATA;
+        fixture.detectChanges();
+        filterField.focus();
+        advanceFilterfieldCycle();
+
+        let options = getMultiselectCheckboxInputs(overlayContainerElement);
+
+        getAndClickOption(overlayContainerElement, 0);
+
+        // Fetching data
+        fixture.componentInstance.dataSource.data = ASYNC_DATA;
+        fixture.detectChanges();
+        advanceFilterfieldCycle(true, true);
+
+        options = getMultiselectCheckboxInputs(overlayContainerElement);
+
+        // Check the first option
+        options[0].click();
+
+        expect(options[0].checked).toBe(true);
+
+        // Close multiselect overlay
+        dispatchFakeEvent(document, 'click');
+        advanceFilterfieldCycle();
+
+        // Fetching the same data
+        fixture.componentInstance.dataSource.data = ASYNC_DATA;
+        fixture.detectChanges();
+        filterField.focus();
+        advanceFilterfieldCycle(true, true);
+
+        const multiSelect = getMultiSelect(overlayContainerElement);
+
+        // Multiselect overlay must be open
+        expect(multiSelect.length).toBe(1);
+
+        options = getMultiselectCheckboxInputs(overlayContainerElement);
+
+        // Previosly selected option should be kept selected
+        expect(options[0].checked).toBe(true);
+      });
     });
 
     describe('edit mode', () => {