fix(simple-combo): prevent form from getting dirty when tab through an empty combo - master (#14683)

Author: georgianastasov

Diff for: projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts

@@ -1133,7 +1133,8 @@ describe('IgxSimpleCombo', () => {
                     FormsModule,
                     IgxSimpleComboSampleComponent,
                     IgxComboInContainerTestComponent,
-                    IgxSimpleComboIconTemplatesComponent
+                    IgxSimpleComboIconTemplatesComponent,
+                    IgxSimpleComboDirtyCheckTestComponent
                 ]
             }).compileComponents();
         }));
@@ -2063,6 +2064,36 @@ describe('IgxSimpleCombo', () => {
 
             expect(combo.comboInput.value).toEqual('ariz');
         }));
+
+        it('should not mark form as dirty when tabbing through an empty combo', fakeAsync(() => {
+            fixture = TestBed.createComponent(IgxSimpleComboDirtyCheckTestComponent);
+            fixture.detectChanges();
+
+            combo = fixture.componentInstance.combo;
+            input = fixture.debugElement.query(By.css('.igx-input-group__input'));
+            reactiveForm = fixture.componentInstance.form;
+            fixture.detectChanges();
+
+            expect(reactiveForm.dirty).toBe(false);
+
+            input.nativeElement.focus();
+            tick();
+            fixture.detectChanges();
+
+            UIInteractions.triggerKeyDownEvtUponElem('ArrowDown', input.nativeElement);
+            tick();
+            fixture.detectChanges();
+
+            input.nativeElement.focus();
+            tick();
+            fixture.detectChanges();
+
+            UIInteractions.triggerEventHandlerKeyDown('Tab', input);
+            tick();
+            fixture.detectChanges();
+
+            expect(reactiveForm.dirty).toBe(false);
+        }));
     });
 
     describe('Display density', () => {
@@ -3367,3 +3398,42 @@ export class IgxSimpleComboNgModelComponent implements OnInit {
         ];
     }
 }
+
+@Component({
+    template: `
+    <form [formGroup]="form">
+        <div class="combo-section">
+            <igx-simple-combo
+                #combo
+                [data]="cities"
+                [displayKey]="'name'"
+                [valueKey]="'id'"
+                formControlName="city"
+            >
+            </igx-simple-combo>
+        </div>
+    </form>
+    `,
+    standalone: true,
+    imports: [IgxSimpleComboComponent, ReactiveFormsModule]
+})
+export class IgxSimpleComboDirtyCheckTestComponent implements OnInit {
+    @ViewChild('combo', { read: IgxSimpleComboComponent, static: true })
+    public combo: IgxSimpleComboComponent;
+
+    public cities: any = [];
+
+    public form = new FormGroup({
+        city: new FormControl<number>({ value: undefined, disabled: false }),
+    });
+
+    public ngOnInit(): void {
+        this.cities = [
+            { id: 1, name: 'New York' },
+            { id: 2, name: 'Los Angeles' },
+            { id: 3, name: 'Chicago' },
+            { id: 4, name: 'Houston' },
+            { id: 5, name: 'Phoenix' }
+        ];
+    }
+}

Diff for: projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts

@@ -574,7 +574,9 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
         if (this.filteredData.length !== this.data.length && !ignoreFilter) {
             newSelection = this.selectionService.delete_items(this.id, this.selectionService.get_all_ids(this.filteredData, this.valueKey));
         }
-        this.setSelection(newSelection);
+        if (this.selectionService.get(this.id).size > 0 || this.comboInput.value.trim()) {
+            this.setSelection(newSelection);
+        }
     }
 
     private clearOnBlur(): void {