Merge branch '20.1.x' into mkirkova/fix-16238-20.1.x

Author: ddaribo

projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss

@@ -178,6 +178,7 @@
 
     .igx-input-group {
         %igx-combo__toggle-button {
+            cursor: pointer;
             background: var-get($theme, 'toggle-button-background');
             color: var-get($theme, 'toggle-button-foreground');
         }
@@ -286,4 +287,12 @@
             }
         }
     }
+
+    igx-combo {
+        %form-group-input,
+        %form-group-prefix,
+        %form-group-suffix {
+            cursor: pointer;
+        }
+    }
 }

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

@@ -59,8 +59,8 @@
     $material-box-top-padding: sizable(rem(16px), rem(20px), rem(24px));
     $material-border-top-padding: sizable(rem(8px), rem(12px), rem(16px));
 
-    $textarea-top-padding: map.get((
-        'material': rem(0px),
+    $textarea-padding: map.get((
+        'material': sizable(rem(8px), rem(12px), rem(16px)),
         'fluent': sizable(rem(6px), rem(10px), rem(14px)),
         'bootstrap': sizable(rem(4px), rem(8px), rem(12px)),
         'indigo': sizable(rem(4px), rem(6px), rem(8px)),
@@ -149,6 +149,7 @@
         [igxPrefix] {
             @extend %form-group-prefix;
             outline-style: none;
+            cursor: default;
 
             &:first-child {
                 @if $variant == 'fluent' {
@@ -164,6 +165,7 @@
         [igxSuffix] {
             @extend %form-group-suffix;
             outline-style: none;
+            cursor: default;
 
             &:last-child {
                 @if $variant == 'fluent' {
@@ -1289,7 +1291,7 @@
 
         %textarea-group-label--focused {
             transform: translateY(0);
-            top: calc(#{$material-box-top-padding} / 4);
+            top: calc(#{$textarea-padding} / 4);
         }
 
         %textarea-group-label--filled--border,
@@ -1425,7 +1427,6 @@
     }
 
     %form-group-input--hover {
-        cursor: pointer;
         color: var-get($theme, 'filled-text-hover-color');
 
         &::placeholder {
@@ -1434,7 +1435,6 @@
     }
 
     %form-group-input--focus {
-        cursor: text;
         color: var-get($theme, 'focused-text-color');
 
         &::placeholder {
@@ -1465,9 +1465,10 @@
         resize: vertical;
         overflow: hidden;
         z-index: 1;
+        padding-block-end: $textarea-padding;
 
         @if $material-theme {
-            padding: 0;
+            padding-block-start: 0;
         }
     }
 
@@ -2023,14 +2024,14 @@
     }
 
     %indigo-textarea {
-        padding-block: $textarea-top-padding 0;
+        padding-block: $textarea-padding;
         padding-inline: pad-inline(rem(2px), rem(4px), rem(6px));
         inset-block-end: rem(2px);
     }
 
     %fluent-textarea {
         padding-inline: pad-inline(rem(8px));
-        padding-block: $textarea-top-padding 0;
+        padding-block: $textarea-padding;
     }
 
     %fluent-input-disabled {
@@ -2292,7 +2293,7 @@
         );
 
         &:is(textarea) {
-            padding-block: $textarea-top-padding 0;
+            padding-block: $textarea-padding;
         }
     }
 

projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss

@@ -15,6 +15,7 @@
 
     .igx-input-group {
         %igx-select__toggle-button {
+            cursor: pointer;
             background: var-get($theme, 'toggle-button-background');
             color: var-get($theme, 'toggle-button-foreground');
         }
@@ -60,4 +61,12 @@
             color: var-get($theme, 'toggle-button-foreground-disabled');
         }
     }
+
+    igx-select {
+        %form-group-input,
+        %form-group-prefix,
+        %form-group-suffix {
+            cursor: pointer;
+        }
+    }
 }

projects/igniteui-angular/src/lib/grids/api.service.ts

@@ -283,7 +283,9 @@ export class GridBaseAPIService<T extends GridType> implements GridServiceType {
     }
 
     public should_apply_number_style(column: ColumnType): boolean {
-        return column.dataType === GridColumnDataType.Number;
+        return column.dataType === GridColumnDataType.Number
+            || column.dataType === GridColumnDataType.Currency
+            || column.dataType === GridColumnDataType.Percent;
     }
 
     public get_data(): any[] {

projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts

@@ -149,7 +149,9 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
 
     @HostBinding('class.igx-grid-th--number')
     public get numberStyle() {
-        return this.column.dataType === GridColumnDataType.Number;
+        return this.column.dataType === GridColumnDataType.Number
+            || this.column.dataType === GridColumnDataType.Currency
+            || this.column.dataType === GridColumnDataType.Percent;
     }
 
     @HostBinding('class.igx-grid-th--sortable')

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-api.service.ts

@@ -76,12 +76,14 @@ export class IgxTreeGridAPIService extends GridBaseAPIService<GridType> {
         if (expanded !== undefined) {
             return expanded;
         } else {
-            return record.children && record.children.length && record.level < grid.expansionDepth;
+            return record.children && !!record.children.length && record.level < grid.expansionDepth;
         }
     }
 
     public override should_apply_number_style(column: ColumnType): boolean {
-        return column.dataType === GridColumnDataType.Number && column.visibleIndex !== 0;
+        return (column.dataType === GridColumnDataType.Number
+            || column.dataType === GridColumnDataType.Currency
+            || column.dataType === GridColumnDataType.Percent) && column.visibleIndex !== 0;
     }
 
     public override deleteRowById(rowID: any): any {

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts

@@ -45,6 +45,15 @@ describe('IgxTreeGrid - Expanding / Collapsing #tGrid', () => {
             treeGrid = fix.componentInstance.treeGrid;
         });
 
+        it('should return boolean for expand state of row without children using getRowByKey()', () => {
+            treeGrid.primaryKey = "ID";
+            treeGrid.childDataKey = "";
+            fix.detectChanges();
+
+            const testRow = treeGrid.getRowByKey(147);
+            expect(testRow.expanded).toEqual(false);
+        });
+
         it('check row expanding and collapsing are changing rows count (UI)', () => {
             let rows = TreeGridFunctions.getAllRows(fix);
             expect(rows.length).toBe(4);

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

@@ -2208,6 +2208,29 @@ describe('IgxSimpleCombo', () => {
             fixture.detectChanges();
             expect(document.activeElement).toEqual(thirdComboInput.nativeElement);
         }));
+
+        it('should lose focus when user closes combo by clicking outside', fakeAsync(() => {
+            // Initially combo is not focused
+            expect(document.activeElement).not.toBe(input.nativeElement);
+
+            // Click inside combo input to focus it
+            input.triggerEventHandler('focus', {});
+            input.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
+            fixture.detectChanges();
+
+            // Verify combo is focused and opened
+            expect(document.activeElement).toBe(input.nativeElement);
+            expect(combo.collapsed).toBe(false);
+
+            // Simulate outside click by clicking on document body
+            // This triggers the blur event which is what happens on outside clicks
+            input.triggerEventHandler('blur', {});
+            document.body.click();
+            tick();
+            fixture.detectChanges();
+
+            expect(document.activeElement).not.toBe(input.nativeElement);
+        }));
     });
 
     describe('Form control tests: ', () => {

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

@@ -260,11 +260,13 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
             }
             if (this.getEditElement() && !args.event) {
                 this._collapsing = true;
+                // Only focus back when programmatically closing (no user event)
+                // to avoid focus loops when user clicks on another combo
+                this.comboInput.focus();
             } else {
                 this.clearOnBlur();
                 this._onTouchedCallback();
             }
-            this.comboInput.focus();
         });
 
         // in reactive form the control is not present initially