Merge branch '8.1.x' into dpetev/select-control-touched-8.1

Author: Lipata

.travis.yml

@@ -1,11 +1,7 @@
 sudo: required
 dist: xenial
 addons:
-  apt:
-    sources:
-      - google-chrome
-    packages:
-      - google-chrome-stable
+  chrome: stable
 services:
   - xvfb
 language: node_js

projects/igniteui-angular/karma.conf.js

@@ -38,7 +38,7 @@ module.exports = function (config) {
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome'],
+    browsers: ['ChromeHeadless'],
     singleRun: false
   });
 };

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

@@ -25,11 +25,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 (click)="handleClearItems($event)">
+    <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>
         </ng-container>

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

@@ -7,7 +7,7 @@ import { IgxToggleModule } from '../directives/toggle/toggle.directive';
 import { IgxComboItemComponent } from './combo-item.component';
 import { IgxComboComponent, IgxComboModule, IgxComboState, IComboSelectionChangeEventArgs } 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';
@@ -3196,6 +3196,25 @@ describe('igxCombo', () => {
             fixture.detectChanges();
             expect(fixture.componentInstance.comboSelectedItems).toEqual([...data].splice(1, 3));
         }));
+
+        it('Should have correctly bound focus and blur handlers', () => {
+            const fixture = TestBed.createComponent(SimpleBindComboComponent);
+            fixture.detectChanges();
+            const combo = fixture.componentInstance.combo;
+            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', () => {
@@ -3268,6 +3287,65 @@ 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);
+
+        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

@@ -155,6 +155,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     private _itemHeight = null;
     private _itemsMaxHeight = null;
     private _onChangeCallback: (_: any) => void = noop;
+    private _onTouchedCallback: () => void = noop;
     private _overlaySettings: OverlaySettings = {
         scrollStrategy: new AbsoluteScrollStrategy(),
         positionStrategy: new ConnectedPositioningStrategy(),
@@ -1254,6 +1255,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 {
@@ -1262,6 +1264,13 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
         }
     }
 
+    /** @hidden @internal */
+    public onFocus() {
+        if (this.collapsed) {
+            this._onTouchedCallback();
+        }
+    }
+
     /**
      * @hidden @internal
      */
@@ -1326,7 +1335,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
@@ -1370,6 +1381,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();
     }