Merge pull request #6481 from IgniteUI/dpetev/combo-control-touched

Combo - properly update FormControl touched

Author: rkaraivanov

projects/igniteui-angular/src/lib/combo/combo.component.html

@@ -9,11 +9,11 @@
         <ng-content select="igx-hint, [igxHint]"></ng-content>
     </ng-container>
     <input igxInput #comboInput name="comboInput" type="text" [value]="value" readonly [attr.placeholder]="placeholder"
-        [disabled]="disabled" (blur)="onBlur()" />
+        [disabled]="disabled" (blur)="onBlur()" (focus)="onFocus()"/>
     <ng-container ngProjectAs="igx-suffix">
         <ng-content select="igx-suffix"></ng-content>
     </ng-container>
-    <igx-suffix *ngIf="value.length" aria-label="Clear Selection" class="igx-combo__clear-button" igxRipple
+    <igx-suffix *ngIf="value.length" aria-label="Clear Selection" class="igx-combo__clear-button"
         (click)="handleClearItems($event)">
         <ng-container *ngIf="clearIconTemplate">
             <ng-container *ngTemplateOutlet="clearIconTemplate"></ng-container>

projects/igniteui-angular/src/lib/combo/combo.component.spec.ts

@@ -6,7 +6,7 @@ import { IgxToggleModule } from '../directives/toggle/toggle.directive';
 import { IgxComboItemComponent } from './combo-item.component';
 import { IgxComboComponent, IgxComboModule, IComboSelectionChangeEventArgs, IgxComboState } from './combo.component';
 import { IgxComboDropDownComponent } from './combo-dropdown.component';
-import { FormGroup, FormControl, Validators, FormBuilder, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { FormGroup, FormControl, Validators, FormBuilder, ReactiveFormsModule, FormsModule, NgControl } from '@angular/forms';
 import { IForOfState } from '../directives/for-of/for_of.directive';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { take } from 'rxjs/operators';
@@ -3250,6 +3250,25 @@ describe('igxCombo', () => {
             fixture.detectChanges();
             expect(component.selectedItems).toEqual([combo.data[0], combo.data[2], combo.data[4]]);
         }));
+
+        it('Should have correctly bound focus and blur handlers', () => {
+            const fixture = TestBed.createComponent(IgxComboInTemplatedFormComponent);
+            fixture.detectChanges();
+            const combo = fixture.componentInstance.testCombo;
+            const input = fixture.debugElement.query(By.css(`${CSS_CLASS_INPUTGROUP} input`));
+
+            spyOn(combo, 'onFocus');
+            spyOn(combo, 'onBlur');
+
+
+            input.triggerEventHandler('focus', {});
+            expect(combo.onFocus).toHaveBeenCalled();
+            expect(combo.onFocus).toHaveBeenCalledWith();
+
+            input.triggerEventHandler('blur', {});
+            expect(combo.onBlur).toHaveBeenCalled();
+            expect(combo.onFocus).toHaveBeenCalledWith();
+        });
     });
 
     describe('Combo - Display Density', () => {
@@ -3322,6 +3341,66 @@ describe('igxCombo', () => {
     });
 });
 
+describe('Combo ControlValueAccessor Unit', () => {
+    let combo: IgxComboComponent;
+    it('should correctly implement interface methods', () => {
+        const mockSelection: {
+                [key: string]: jasmine.Spy
+            } = jasmine.createSpyObj('IgxSelectionAPIService', ['get', 'set', 'add_items', 'select_items']);
+        const mockCdr = jasmine.createSpyObj('ChangeDetectorRef', ['markForCheck']);
+        const mockComboService = jasmine.createSpyObj('IgxComboAPIService', ['register']);
+        const mockNgControl = jasmine.createSpyObj('NgControl', ['registerOnChangeCb', 'registerOnTouchedCb']);
+        const mockInjector = jasmine.createSpyObj('Injector', {
+            'get': mockNgControl
+        });
+        mockSelection.get.and.returnValue(new Set([]));
+
+        // init
+        combo = new IgxComboComponent({ nativeElement: null }, mockCdr, mockSelection as any, mockComboService, null, mockInjector);
+        combo.ngOnInit();
+        expect(mockInjector.get).toHaveBeenCalledWith(NgControl, null);
+        combo.registerOnChange(mockNgControl.registerOnChangeCb);
+        combo.registerOnTouched(mockNgControl.registerOnTouchedCb);
+
+        // writeValue
+        expect(combo.value).toBe('');
+        mockSelection.add_items.and.returnValue(new Set(['test']));
+        spyOnProperty(combo, 'isRemote').and.returnValue(false);
+        combo.writeValue(['test']);
+        // TODO: Uncomment after fix for write value going through entire selection process
+        // expect(mockNgControl.registerOnChangeCb).not.toHaveBeenCalled();
+        expect(mockSelection.add_items).toHaveBeenCalledWith(combo.id, ['test'], true);
+        expect(mockSelection.select_items).toHaveBeenCalledWith(combo.id, ['test'], true);
+        expect(combo.value).toBe('test');
+
+        // setDisabledState
+        combo.setDisabledState(true);
+        expect(combo.disabled).toBe(true);
+        combo.setDisabledState(false);
+        expect(combo.disabled).toBe(false);
+
+        // OnChange callback
+        mockSelection.add_items.and.returnValue(new Set(['simpleValue']));
+        combo.selectItems(['simpleValue']);
+        expect(mockSelection.add_items).toHaveBeenCalledWith(combo.id, ['simpleValue'], undefined);
+        expect(mockSelection.select_items).toHaveBeenCalledWith(combo.id, ['simpleValue'], true);
+        expect(mockNgControl.registerOnChangeCb).toHaveBeenCalledWith(['simpleValue']);
+
+        // OnTouched callback
+        spyOnProperty(combo, 'collapsed').and.returnValue(true);
+        spyOnProperty(combo, 'valid', 'set');
+
+        combo.onFocus();
+        expect(mockNgControl.registerOnTouchedCb).toHaveBeenCalledTimes(1);
+
+        combo.onBlur();
+        expect(mockNgControl.registerOnTouchedCb).toHaveBeenCalledTimes(2);
+    });
+
+    it('should correctly handle ngControl validity', () => {
+        pending('Convert existing form test here');
+    });
+});
 @Component({
     template: `
 <igx-combo #combo

projects/igniteui-angular/src/lib/combo/combo.component.ts

@@ -151,6 +151,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     private _itemsMaxHeight = null;
     private _remoteSelection = {};
     private _onChangeCallback: (_: any) => void = noop;
+    private _onTouchedCallback: () => void = noop;
     private _overlaySettings: OverlaySettings = {
         scrollStrategy: new AbsoluteScrollStrategy(),
         positionStrategy: new ConnectedPositioningStrategy(),
@@ -1124,6 +1125,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      */
     public onBlur() {
         if (this.collapsed) {
+            this._onTouchedCallback();
             if (this.ngControl && !this.ngControl.valid) {
                 this.valid = IgxComboState.INVALID;
             } else {
@@ -1132,6 +1134,13 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
         }
     }
 
+    /** @hidden @internal */
+    public onFocus() {
+        if (this.collapsed) {
+            this._onTouchedCallback();
+        }
+    }
+
     /**
      * @hidden @internal
      */
@@ -1185,7 +1194,9 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     /**
      * @hidden @internal
      */
-    public registerOnTouched(fn: any): void { }
+    public registerOnTouched(fn: any): void {
+        this._onTouchedCallback = fn;
+    }
 
     /**
      * @hidden @internal
@@ -1229,6 +1240,11 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      */
     public handleClearItems(event: Event): void {
         this.deselectAllItems(true, event);
+        if (this.collapsed) {
+            this.getEditElement().focus();
+        } else {
+            this.focusSearchInput(true);
+        }
         event.stopPropagation();
     }
 

src/app/combo/combo.sample.html

@@ -70,7 +70,7 @@
                 <h5 class="sample-title">Template Form</h5>
                 <form>
                     <igx-combo class="input-container" [placeholder]="'Locations'"
-                        name="anyName" required [(ngModel)]="values1"
+                        name="anyName" required [(ngModel)]="values1" [ngModelOptions]="{ updateOn: 'blur' }" #comboModel="ngModel"
                         [data]="items" [filterable]="filterableFlag"
                         [displayKey]="valueKeyVar" [valueKey]="valueKeyVar"
                         [groupKey]="valueKeyVar ? 'region' : ''" [width]="'100%'">