Merge pull request #14145 from IgniteUI/ikitanov/fix-#14044-master

Update display value when model changes & sync sample with the one in the samples repo
IgniteUI · May 9, 2024 · c5463a4 · c5463a4
2 parents 2f58ee4 + 06f31a2
commit c5463a4
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 6 deletions.
diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts
@@ -2079,7 +2079,8 @@ describe('IgxSimpleCombo', () => {
                     ReactiveFormsModule,
                     FormsModule,
                     IgxComboRemoteDataComponent,
-                    IgxSimpleComboBindingDataAfterInitComponent
+                    IgxSimpleComboBindingDataAfterInitComponent,
+                    IgxComboRemoteDataInReactiveFormComponent
                 ]
             }).compileComponents();
         }));
@@ -2169,6 +2170,37 @@ describe('IgxSimpleCombo', () => {
 
             expect(combo.comboInput.value).toEqual('');
         });
+
+        it('should display correct value after the value has been changed from the form and then by the user', fakeAsync(() => {
+            fixture = TestBed.createComponent(IgxComboRemoteDataInReactiveFormComponent);
+            fixture.detectChanges();
+            combo = fixture.componentInstance.reactiveCombo;
+            reactiveForm = fixture.componentInstance.reactiveForm;
+            reactiveControl = reactiveForm.form.controls['comboValue'];
+            input = fixture.debugElement.query(By.css(`.${CSS_CLASS_COMBO_INPUTGROUP}`));
+            tick()
+            fixture.detectChanges();
+            expect(combo).toBeTruthy();
+
+            combo.select(0);
+            fixture.detectChanges();
+            expect(combo.value).toEqual(0);
+            expect(input.nativeElement.value).toEqual('Product 0');
+
+            reactiveControl.setValue(3);
+            fixture.detectChanges();
+            expect(combo.value).toEqual(3);
+            expect(input.nativeElement.value).toEqual('Product 3');
+
+            combo.open();
+            fixture.detectChanges();
+            const item1 = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_DROPDOWNLISTITEM}`))[5];
+            item1.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
+            fixture.detectChanges();
+
+            expect(combo.value).toEqual(5);
+            expect(input.nativeElement.value).toEqual('Product 5');
+        }));
     });
 });
 
@@ -2418,6 +2450,59 @@ class IgxSimpleComboInTemplatedFormComponent {
     }
 }
 
+@Component({
+    providers: [RemoteDataService],
+    template: `
+    <form [formGroup]="comboForm" #reactiveForm="ngForm">
+        <igx-simple-combo #reactiveCombo [placeholder]="'Products'" [data]="data | async" (dataPreLoad)="dataLoading($event)" [itemsMaxHeight]='400'
+    [itemHeight]='40' [valueKey]="'id'" [displayKey]="'product'" [width]="'400px'" formControlName="comboValue" name="combo">
+    </igx-simple-combo>
+     <button #button IgxButton (click)="changeValue()">Change value</button>
+    </form>
+    `,
+    standalone: true,
+    imports: [IgxSimpleComboComponent, AsyncPipe, ReactiveFormsModule]
+})
+export class IgxComboRemoteDataInReactiveFormComponent implements OnInit, AfterViewInit, OnDestroy {
+    @ViewChild('reactiveCombo', { read: IgxSimpleComboComponent, static: true })
+    public reactiveCombo: IgxSimpleComboComponent;
+    @ViewChild('button', { read: HTMLButtonElement, static: true })
+    public button: HTMLButtonElement;
+    @ViewChild('reactiveForm')
+    public reactiveForm: NgForm;
+    public comboForm: UntypedFormGroup;
+    public data;
+    constructor(private remoteDataService: RemoteDataService, public cdr: ChangeDetectorRef, fb: UntypedFormBuilder) {
+        this.comboForm = fb.group({
+            comboValue: new UntypedFormControl('', Validators.required),
+        });
+    }
+    public ngOnInit(): void {
+        this.data = this.remoteDataService.records;
+    }
+
+    public ngAfterViewInit() {
+        this.remoteDataService.getData(this.reactiveCombo.virtualizationState, (count) => {
+            this.reactiveCombo.totalItemCount = count;
+            this.cdr.detectChanges();
+        });
+    }
+
+    public dataLoading(evt) {
+        this.remoteDataService.getData(evt, () => {
+            this.cdr.detectChanges();
+        });
+    }
+
+    public ngOnDestroy() {
+        this.cdr.detach();
+    }
+
+    public changeValue() {
+        this.comboForm.get('comboValue').setValue(14);
+    }
+}
+
 @Component({
     template: `
     <form [formGroup]="comboForm" #reactiveForm="ngForm">

diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts
@@ -523,7 +523,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
         if (add && selection) {
             this._remoteSelection[selection[this.valueKey]] = selection[this.displayKey].toString();
         } else {
-            delete this._remoteSelection[ids[0]];
+            this._remoteSelection = {};
         }
     }
 

diff --git a/src/app/combo/combo.sample.ts b/src/app/combo/combo.sample.ts
@@ -369,7 +369,7 @@ export class ComboSampleComponent implements OnInit, AfterViewInit {
     }
 
     public onSimpleComboSelectionChanging(evt: ISimpleComboSelectionChangingEventArgs) {
-        this.hasSelection = evt.newSelection !== undefined;
+        this.hasSelection = evt.newValue !== undefined;
 
         if (!this.hasSelection) {
             this.itemID = 1;
@@ -379,12 +379,12 @@ export class ComboSampleComponent implements OnInit, AfterViewInit {
 
         this.currentVirtState.chunkSize = Math.ceil(this.remoteSimpleCombo.itemsMaxHeight / this.remoteSimpleCombo.itemHeight);
 
-        this.itemCount === evt.newSelection ?
+        this.itemCount === evt.newValue ?
             this.additionalScroll = this.remoteSimpleCombo.itemHeight :
             this.additionalScroll = 0;
 
-        if (this.itemCount - evt.newSelection >= this.currentVirtState.chunkSize - 1) {
-            this.itemID = this.currentVirtState.startIndex = evt.newSelection;
+        if (this.itemCount - evt.newValue >= this.currentVirtState.chunkSize - 1) {
+            this.itemID = this.currentVirtState.startIndex = evt.newValue;
         } else {
             this.itemID = this.currentVirtState.startIndex = this.itemCount - (this.currentVirtState.chunkSize - 1);
         }