Skip to content

Commit e68d426

Browse files
georgianastasovgeorgianastasov
authored
Merge branch '17.2.x' into ganastasov/fix-14314-17.2.x
2 parents 9ddceb4 + 83bc2a8 commit e68d426

File tree

9 files changed

+176
-14
lines changed

9 files changed

+176
-14
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ All notable changes for each version of this project will be documented in this
2929
- `IgxSimpleCombo`
3030
- **Behavioral Change** When bound to `ngModel` and `formControlName` directives, the model would not be updated when the user types into the input and will only be updated on selection.
3131
- **Behavioral Change** The `selectionChanging` event will now trigger when typing the first character in the input if there is a previously selected value in the `IgxSimpleCombo`.
32+
- **Behavioral Change** Updated behavior to maintain the entered text in the input field upon pressing Enter while the combo input is focused, ensuring uninterrupted focus for continuous filtering. Additionally, the dropdown menu now remains open to display filtered results.
3233

3334

3435
## 17.1.0

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@ export class IgxComboDropDownComponent extends IgxDropDownComponent implements I
128128
public override navigatePrev() {
129129
if (this._focusedItem && this._focusedItem.index === 0 && this.virtDir.state.startIndex === 0) {
130130
this.combo.focusSearchInput(false);
131+
this.focusedItem = null;
131132
} else {
132133
super.navigatePrev();
133134
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
180180
if (selection) {
181181
this.selectionService.set(this._id, selection);
182182
}
183-
if (this.dropdown.open) {
183+
if (this.dropdown?.open) {
184184
this.dropdown.close();
185185
}
186186
if (this.inputGroup?.isFocused) {

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1153,6 +1153,22 @@ describe('igxCombo', () => {
11531153
caseSensitiveIcon = fixture.debugElement.query(By.css('igx-icon[name=\'case-sensitive\']'));
11541154
expect(caseSensitiveIcon).toBeNull();
11551155
});
1156+
it('should render the combo component with the id set and not throw an error', () => {
1157+
fixture = TestBed.createComponent(ComboWithIdComponent);
1158+
fixture.detectChanges();
1159+
1160+
combo = fixture.componentInstance.combo;
1161+
fixture.detectChanges();
1162+
1163+
expect(combo).toBeTruthy();
1164+
expect(combo.id).toEqual("id1");
1165+
fixture.detectChanges();
1166+
1167+
const errorSpy = spyOn(console, 'error');
1168+
fixture.detectChanges();
1169+
1170+
expect(errorSpy).not.toHaveBeenCalled();
1171+
});
11561172
});
11571173
describe('Positioning tests: ', () => {
11581174
let containerElement: any;
@@ -3875,3 +3891,32 @@ export class ComboArrayTypeValueKeyComponent {
38753891
];
38763892
}
38773893
}
3894+
3895+
@Component({
3896+
template: `
3897+
<igx-combo id="id1" [data]="items" valueKey="value" displayKey="item"></igx-combo>`,
3898+
standalone: true,
3899+
imports: [IgxComboComponent]
3900+
})
3901+
export class ComboWithIdComponent {
3902+
@ViewChild(IgxComboComponent, { read: IgxComboComponent, static: true })
3903+
public combo: IgxComboComponent;
3904+
public items: any[] = [];
3905+
3906+
constructor() {
3907+
this.items = [
3908+
{
3909+
item: "Item1",
3910+
value: "Option1"
3911+
},
3912+
{
3913+
item: "Item2",
3914+
value: "Option2"
3915+
},
3916+
{
3917+
item: "Item3",
3918+
value: "Option3",
3919+
}
3920+
];
3921+
}
3922+
}

‎projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts‎

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import { ISortingExpression, SortingDirection } from '../../data-operations/sort
2626
import { GRID_SCROLL_CLASS } from '../../test-utils/grid-functions.spec';
2727
import { AsyncPipe, NgFor, NgIf } from '@angular/common';
2828
import { IgxPaginatorComponent, IgxPaginatorContentDirective } from '../../paginator/paginator.component';
29-
import { IGridRowEventArgs, IgxGridFooterComponent, IgxGridRow, IgxGroupByRow, IgxSummaryRow } from '../public_api';
29+
import { IGridRowEventArgs, IgxColumnGroupComponent, IgxGridFooterComponent, IgxGridRow, IgxGroupByRow, IgxSummaryRow } from '../public_api';
3030
import { getComponentSize } from '../../core/utils';
3131

3232

@@ -1896,6 +1896,20 @@ describe('IgxGrid Component Tests #grid', () => {
18961896

18971897
expect(calcWidth).not.toBe(80);
18981898
});
1899+
1900+
it('should correctly autosize column headers inside column groups.', async () => {
1901+
const fix = TestBed.createComponent(IgxGridColumnHeaderInGroupAutoSizeComponent);
1902+
const grid = fix.componentInstance.grid;
1903+
grid.data = [{field1: "Test"}];
1904+
1905+
//waiting for reqeustAnimationFrame to finish
1906+
fix.detectChanges();
1907+
await wait(17);
1908+
fix.detectChanges();
1909+
1910+
const calcWidth = parseInt(grid.getColumnByName("field1").calcWidth);
1911+
expect(calcWidth).toBe(126);
1912+
});
18991913
});
19001914

19011915
describe('IgxGrid - API methods', () => {
@@ -2962,6 +2976,36 @@ export class IgxGridColumnHeaderAutoSizeComponent {
29622976

29632977
}
29642978

2979+
@Component({
2980+
template: `
2981+
<igx-grid #grid>
2982+
<igx-column-group>
2983+
<igx-column
2984+
field="field1"
2985+
header="Field 1 Header"
2986+
width="auto"
2987+
></igx-column>
2988+
<igx-column
2989+
field="field2"
2990+
header="Field 2 Header"
2991+
width="auto"
2992+
></igx-column>
2993+
<igx-column
2994+
field="field3"
2995+
header="Field 3 Header"
2996+
width="auto"
2997+
></igx-column>
2998+
</igx-column-group>
2999+
</igx-grid>`,
3000+
standalone: true,
3001+
imports: [IgxGridComponent, IgxColumnComponent, IgxColumnGroupComponent]
3002+
3003+
})
3004+
export class IgxGridColumnHeaderInGroupAutoSizeComponent {
3005+
@ViewChild('grid', { read: IgxGridComponent, static: true })
3006+
public grid: IgxGridComponent;
3007+
}
3008+
29653009
@Component({
29663010
template: `<igx-grid #grid [data]="data" [width]="'500px'" (columnInit)="initColumns($event)">
29673011
<igx-column *ngFor="let col of columns" [field]="col.key" [header]="col.key" [dataType]="col.dataType">

‎projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { By } from '@angular/platform-browser';
44
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
55
import { IgxGridComponent } from './grid.component';
66
import { SampleTestData } from '../../test-utils/sample-test-data.spec';
7-
import { ViewChild, Component } from '@angular/core';
7+
import { ViewChild, Component, DebugElement } from '@angular/core';
88
import { IgxColumnLayoutComponent } from '../columns/column-layout.component';
99
import { wait, UIInteractions } from '../../test-utils/ui-interactions.spec';
1010
import { DefaultSortingStrategy, SortingDirection } from '../../data-operations/sorting-strategy';
@@ -30,6 +30,7 @@ interface ColGroupsType {
3030
describe('IgxGrid - multi-row-layout Integration #grid - ', () => {
3131
let fixture: ComponentFixture<FixtureType>;
3232
let grid: IgxGridComponent;
33+
const COLUMN_HEADER_CLASS = '.igx-grid-th';
3334
configureTestSuite((() => {
3435
return TestBed.configureTestingModule({
3536
imports: [
@@ -896,6 +897,30 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => {
896897
expect((grid.verticalScrollContainer.getScroll().children[0] as HTMLElement).offsetHeight -
897898
grid.verticalScrollContainer.getScroll().offsetHeight).toBeLessThanOrEqual(0);
898899
}));
900+
901+
it('should create only one ghost element when dragging a column', async () => {
902+
const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
903+
904+
const header = headers[1].nativeElement;
905+
UIInteractions.simulatePointerEvent('pointerdown', header, 50, 50);
906+
await wait();
907+
fixture.detectChanges();
908+
909+
UIInteractions.simulatePointerEvent('pointermove', header, 56, 56);
910+
await wait(50);
911+
fixture.detectChanges();
912+
913+
UIInteractions.simulatePointerEvent('pointermove', header, 230, 30);
914+
await wait();
915+
fixture.detectChanges();
916+
917+
const ghost = fixture.debugElement.queryAll(By.css('.igx-grid__drag-ghost-image'));
918+
expect(ghost.length).toEqual(1);
919+
920+
UIInteractions.simulatePointerEvent('pointerup', header, 230, 30);
921+
await wait();
922+
fixture.detectChanges();
923+
});
899924
});
900925

901926
describe('Resizing', () => {
@@ -1335,6 +1360,19 @@ export class ColumnLayoutGroupingTestComponent extends ColumnLayoutPinningTestCo
13351360
{ field: 'Country', rowStart: 2, colStart: 2, groupable: true },
13361361
{ field: 'Address', rowStart: 3, colStart: 1, colEnd: 3 }
13371362
];
1363+
1364+
public override colGroups: ColGroupsType[] = [
1365+
{
1366+
group: 'group1',
1367+
pinned: true,
1368+
columns: this.cols2
1369+
},
1370+
{
1371+
group: 'group2',
1372+
pinned: false,
1373+
columns: this.cols1
1374+
}
1375+
];
13381376
}
13391377
@Component({
13401378
template: `

‎projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,7 @@
1111
<igx-grid-header-group *ngIf="!child.hidden" class="igx-grid-thead__subgroup"
1212
[ngClass]="child.headerGroupClasses"
1313
[ngStyle]="child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger"
14-
[column]="child"
15-
[igxColumnMovingDrag]="child"
16-
[ghostHost]="grid.outlet.nativeElement"
17-
[attr.droppable]="true"
18-
[igxColumnMovingDrop]="child">
14+
[column]="child">
1915
</igx-grid-header-group>
2016
</ng-container>
2117
</div>
@@ -70,8 +66,8 @@
7066
[ngClass]="child.headerGroupClasses"
7167
[ngStyle]="child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger"
7268
[column]="child"
73-
[style.min-width]="child.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts"
74-
[style.flex-basis]="child.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts">
69+
[style.min-width]="child.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts"
70+
[style.flex-basis]="child.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts">
7571
</igx-grid-header-group>
7672
</ng-container>
7773
</div>

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1734,6 +1734,36 @@ describe('IgxSimpleCombo', () => {
17341734
expect(combo.filteredData.length).toEqual(1);
17351735
expect(combo.filteredData[0].field).toEqual('Arizona');
17361736
}));
1737+
1738+
it('should not select the first item when combo is focused there is no focus item and Enter is pressed', fakeAsync(() => {
1739+
combo.open();
1740+
tick();
1741+
fixture.detectChanges();
1742+
1743+
UIInteractions.simulateTyping('ariz', input);
1744+
tick();
1745+
fixture.detectChanges();
1746+
1747+
expect(combo.dropdown.collapsed).toBe(false);
1748+
1749+
UIInteractions.triggerKeyDownEvtUponElem('ArrowDown', input.nativeElement);
1750+
tick();
1751+
fixture.detectChanges();
1752+
1753+
input.nativeElement.focus();
1754+
tick();
1755+
fixture.detectChanges();
1756+
1757+
combo.dropdown.focusedItem = undefined;
1758+
tick();
1759+
fixture.detectChanges();
1760+
1761+
UIInteractions.triggerKeyDownEvtUponElem('Enter', input.nativeElement);
1762+
tick();
1763+
fixture.detectChanges();
1764+
1765+
expect(combo.comboInput.value).toEqual('ariz');
1766+
}));
17371767
});
17381768

17391769
describe('Display density', () => {

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

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -331,10 +331,17 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
331331
return;
332332
}
333333
if (!this.dropdown.collapsed) {
334-
this.select(this.dropdown.focusedItem.itemID);
335-
event.preventDefault();
336-
event.stopPropagation();
337-
this.close();
334+
const focusedItem = this.dropdown.focusedItem;
335+
if (focusedItem && !focusedItem.isHeader) {
336+
this.select(focusedItem.itemID);
337+
event.preventDefault();
338+
event.stopPropagation();
339+
this.close();
340+
} else {
341+
event.preventDefault();
342+
event.stopPropagation();
343+
this.comboInput.focus();
344+
}
338345
}
339346
// manually trigger text selection as it will not be triggered during editing
340347
this.textSelection.trigger();

0 commit comments

Comments
 (0)