Merge branch 'master' into bpachilova/feat-14928-primaryKey-warning

Author: ddaribo

CHANGELOG.md

@@ -43,16 +43,16 @@ All notable changes for each version of this project will be documented in this
     -  When possible the state directive nows reuses the column that already exists on the grid when restoring the state, instead of creating new column instances every time. This removes the need to set any complex objects manually back on the column on `columnInit`. The only instance where this is still necessary is when the column (or its children in case of column groups) have no `field` property so there's no way to uniquely identify the matching column.
     - Added support for persisting Multi-Row Layout.
 ### Themes
-- `Palettes`
+- **Breaking Change** `Palettes`
     - All palette colors have been migrated to the [CSS relative colors syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors). This means that color consumed as CSS variables no longer need to be wrapped in an `hsl` function. 
 
     Example: 
     ```css
     /* 18.1.x and before: */
-    background: hsl(var(--igx-primary-600));
+    background: hsl(var(--ig-primary-600));
 
     /* 18.2.0+: */
-    background: var(--igx-primary-600);
+    background: var(--ig-primary-600);
     ```
 
     This change also opens up the door for declaring the base (500) variants of each color in CSS from any color, including other CSS variables, whereas before the Sass `palette` function was needed to generate color shades from a base color.

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

@@ -1214,6 +1214,9 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
     /** @hidden @internal */
     public handleClosed() {
         this.closed.emit({ owner: this });
+        if(this.comboInput.nativeElement !== this.document.activeElement){
+            this.validateComboState();
+        }
     }
 
     /** @hidden @internal */
@@ -1253,14 +1256,15 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
     public onBlur() {
         if (this.collapsed) {
             this._onTouchedCallback();
-            if (this.ngControl && this.ngControl.invalid) {
-                this.valid = IgxInputState.INVALID;
-            } else {
-                this.valid = IgxInputState.INITIAL;
-            }
+            this.validateComboState();
         }
     }
 
+    /** @hidden @internal */
+    public onFocus(): void {
+        this._onTouchedCallback();
+    }
+
     /** @hidden @internal */
     public setActiveDescendant(): void {
         this.activeDescendant = this.dropdown.focusedItem?.id || '';
@@ -1285,6 +1289,14 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
         this.manageRequiredAsterisk();
     };
 
+    private validateComboState() {
+        if (this.ngControl && this.ngControl.invalid) {
+            this.valid = IgxInputState.INVALID;
+        } else {
+            this.valid = IgxInputState.INITIAL;
+        }
+    }
+
     private get isTouchedOrDirty(): boolean {
         return (this.ngControl.control.touched || this.ngControl.control.dirty);
     }

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

@@ -13,7 +13,8 @@
             role="combobox" aria-haspopup="listbox"
             [attr.aria-expanded]="!dropdown.collapsed" [attr.aria-controls]="dropdown.listId"
             [attr.aria-labelledby]="ariaLabelledBy || label?.id || placeholder"
-            (blur)="onBlur()" />
+            (blur)="onBlur()"
+            (focus)="onFocus()" />
     <ng-container ngProjectAs="igx-suffix">
         <ng-content select="igx-suffix"></ng-content>
     </ng-container>

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

@@ -3606,6 +3606,29 @@ describe('igxCombo', () => {
                     expect(combo.valid).toEqual(IgxInputState.INITIAL);
                     expect(combo.comboInput.valid).toEqual(IgxInputState.INITIAL);
                 }));
+                it('should mark as touched and invalid when combo is focused, dropdown appears, and user clicks away without selection', fakeAsync(() => {
+                    const ngModel = fixture.debugElement.query(By.directive(NgModel)).injector.get(NgModel);
+                    expect(combo.valid).toEqual(IgxInputState.INITIAL);
+                    expect(combo.comboInput.valid).toEqual(IgxInputState.INITIAL);
+                    expect(ngModel.touched).toBeFalse();
+
+                    combo.open();
+                    input.triggerEventHandler('focus', {});
+                    fixture.detectChanges();
+                    expect(ngModel.touched).toBeTrue();
+                    combo.searchInput.nativeElement.focus();
+                    fixture.detectChanges();
+                    const documentClickEvent = new MouseEvent('click', { bubbles: true });
+                    document.body.dispatchEvent(documentClickEvent);
+                    fixture.detectChanges();
+                    tick();
+                    document.body.focus();
+                    fixture.detectChanges();
+                    tick();
+                    expect(combo.valid).toEqual(IgxInputState.INVALID);
+                    expect(combo.comboInput.valid).toEqual(IgxInputState.INVALID);
+                    expect(ngModel.touched).toBeTrue();
+                }));
             });
         });
         describe('Display density', () => {
@@ -3787,7 +3810,7 @@ class IgxComboFormComponent {
 @Component({
     template: `
     <form #form="ngForm">
-        <igx-combo #testCombo class="input-container" [placeholder]="'Locations'"
+        <igx-combo #testCombo #testComboNgModel="ngModel" class="input-container" [placeholder]="'Locations'"
             name="anyName" required [(ngModel)]="values"
             [data]="items" [disableFiltering]="disableFilteringFlag"
             [displayKey]="'field'" [valueKey]="'field'"