fix(multi-select): keep selected value when option changes (#881)

allianz · Apr 18, 2023 · 0f44af1 · 0f44af1
1 parent 50dfcb8
commit 0f44af1
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/projects/ng-aquila/src/dropdown/multi-select/multi-select.component.ts b/projects/ng-aquila/src/dropdown/multi-select/multi-select.component.ts
@@ -251,7 +251,14 @@ export class NxMultiSelectComponent<S, T> implements ControlValueAccessor, NxFor
     /**
      * List of options to choose from.
      */
-    @Input() options: S[] = [];
+    private _option: S[] = [];
+    @Input() set options(value: S[]) {
+        this._option = value;
+        this.writeValue(this.ngControl?.value);
+    }
+    get options() {
+        return this._option;
+    }
 
     /**
      * Placeholder for the filter input.

diff --git a/projects/ng-aquila/src/dropdown/multi-select/multi-select.spec.ts b/projects/ng-aquila/src/dropdown/multi-select/multi-select.spec.ts
@@ -641,6 +641,27 @@ describe('NxMultiSelectComponent', () => {
                     { label: 'Cherry', id: 3, otherLabel: 'C' },
                 ]);
             });
+
+            it('should displayed value in the label, If the selected value still exists after the options have been changed', async () => {
+                multiSelectInstance.selectValue = 'label';
+                testInstance.model = ['Potato'];
+                testInstance.options = [
+                    {
+                        label: 'Apple',
+                        otherLabel: 'A',
+                        id: 1,
+                    },
+                    {
+                        label: 'Potato',
+                        otherLabel: 'O',
+                        id: 2,
+                    },
+                ];
+                fixture.detectChanges();
+
+                expect(await multiSelectHarness.getValueText()).toBe('Potato(1)');
+                expect(testInstance.model).toEqual(['Potato']);
+            });
         });
 
         describe('and using selectValue with a string', () => {