Skip to content

Commit 3523652

Browse files
mpavlinovmpavlinov
authored
Merge branch '8.1.x' into rkolev/fix-5404-8.1.x
2 parents 7a0075d + 9e03ece commit 3523652

File tree

9 files changed

+141
-66
lines changed

9 files changed

+141
-66
lines changed

‎projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,9 +87,8 @@
8787
<ng-container *ngFor="let item of expressionsList; index as i; let last = last;" tabindex="0">
8888
<igx-chip #chip id='chip'
8989
(pointerdown)="onChipPointerdown($event, chip)"
90-
(click)="onChipClick($event, chip)"
91-
(onSelection)="onChipSelected($event, item.expression)"
92-
(keydown)="onChipKeyDown($event, chip)"
90+
(click)="onChipClick($event, item)"
91+
(keydown)="onChipKeyDown($event, item)"
9392
(onRemove)="onChipRemoved($event, item)"
9493
[selectable]="false"
9594
[selected]="item.isSelected"

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

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -75,11 +75,13 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
7575
}
7676

7777
set column(val) {
78+
if (this._column) {
79+
this.expressionsList.forEach(exp => exp.isSelected = false);
80+
}
7881
if (val) {
7982
this._column = val;
8083

8184
this.expressionsList = this.filteringService.getExpressions(this._column.field);
82-
8385
this.resetExpression();
8486

8587
this.chipAreaScrollOffset = 0;
@@ -148,6 +150,11 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
148150
this._conditionsOverlaySettings.outlet = this.column.grid.outletDirective;
149151
this._operatorsOverlaySettings.outlet = this.column.grid.outletDirective;
150152

153+
const selectedItem = this.expressionsList.find(expr => expr.isSelected === true);
154+
if (selectedItem) {
155+
this.expression = selectedItem.expression;
156+
}
157+
151158
this.input.nativeElement.focus();
152159
}
153160

@@ -364,8 +371,8 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
364371
* Commits the value of the input.
365372
*/
366373
public commitInput() {
367-
this.expressionsList.forEach(ex => ex.isSelected = false);
368-
this.chipsArea.chipsList.forEach(chip => chip.selected = false);
374+
const selectedItem = this.expressionsList.filter(ex => ex.isSelected === true);
375+
selectedItem.forEach(e => e.isSelected = false);
369376

370377
let indexToDeselect = -1;
371378
for (let index = 0; index < this.expressionsList.length; index++) {
@@ -435,8 +442,8 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
435442
}
436443
requestAnimationFrame(() => {
437444
const focusedElement = document.activeElement;
438-
if (!(focusedElement && this.inputGroup.nativeElement.contains(focusedElement)) &&
439-
this.dropDownConditions.collapsed) {
445+
if (!(focusedElement && this.inputGroup.nativeElement.contains(focusedElement))
446+
&& this.dropDownConditions.collapsed) {
440447
this.commitInput();
441448
}
442449
});
@@ -527,44 +534,37 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
527534
this._cancelChipClick = chip.selected && activeElement && this.inputGroup.nativeElement.contains(activeElement);
528535
}
529536

530-
public onChipClick(args, chip: IgxChipComponent) {
537+
public onChipClick(args, item: ExpressionUI) {
531538
if (this._cancelChipClick) {
532539
return;
533540
}
534541

535542
this._cancelChipClick = false;
536-
chip.selected = !chip.selected;
543+
544+
this.expressionsList.forEach(ex => ex.isSelected = false);
545+
546+
this.toggleChip(item);
537547
}
538548

539-
/**
540-
* Event handler for chip selected event.
541-
*/
542-
public onChipSelected(eventArgs: IChipSelectEventArgs, expression: IFilteringExpression) {
543-
if (eventArgs.selected) {
544-
if (this.chipsArea.chipsList) {
545-
this.chipsArea.chipsList.forEach((chip) => {
546-
if (chip !== eventArgs.owner) {
547-
chip.selected = false;
548-
}
549-
});
550-
}
551-
this.expression = expression;
549+
public toggleChip(item: ExpressionUI) {
550+
item.isSelected = !item.isSelected;
551+
if (item.isSelected) {
552+
this.expression = item.expression;
552553

553554
if (this.input) {
554555
this.input.nativeElement.focus();
555556
}
556-
} else if (this.expression === expression) {
557-
this.resetExpression();
558557
}
559558
}
560559

561560
/**
562561
* Event handler for chip keydown event.
563562
*/
564-
public onChipKeyDown(eventArgs: KeyboardEvent, chip: IgxChipComponent) {
563+
public onChipKeyDown(eventArgs: KeyboardEvent, item: ExpressionUI) {
565564
if (eventArgs.key === KEYS.ENTER) {
566565
eventArgs.preventDefault();
567-
chip.selected = !chip.selected;
566+
567+
this.toggleChip(item);
568568
}
569569
}
570570

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

Lines changed: 66 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -258,6 +258,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
258258
private _observer: MutationObserver;
259259
protected _destroyed = false;
260260
private overlayIDs = [];
261+
private _hostWidth;
261262
/**
262263
* An accessor that sets the resource strings.
263264
* By default it uses EN resources.
@@ -648,6 +649,13 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
648649
}
649650
}
650651

652+
/**
653+
* @hidden
654+
*/
655+
@HostBinding('style.width')
656+
get hostWidth() {
657+
return this._width || this._hostWidth;
658+
}
651659
/**
652660
* Returns the width of the `IgxGridComponent`.
653661
* ```typescript
@@ -656,7 +664,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
656664
* @memberof IgxGridBaseComponent
657665
*/
658666
@WatchChanges()
659-
@HostBinding('style.width')
660667
@Input()
661668
get width() {
662669
return this._width;
@@ -3063,6 +3070,11 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
30633070
return this._unpinnedWidth;
30643071
}
30653072

3073+
get isHorizontalScrollHidden() {
3074+
const diff = this.unpinnedWidth - this.totalWidth;
3075+
return this.width === null || diff >= 0;
3076+
}
3077+
30663078
/**
30673079
* @hidden
30683080
* Gets the combined width of the columns that are specific to the enabled grid features. They are fixed.
@@ -4043,7 +4055,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
40434055
*/
40444056
protected _derivePossibleWidth() {
40454057
if (!this.columnWidthSetByUser) {
4046-
this._columnWidth = this.getPossibleColumnWidth();
4058+
this._columnWidth = this.width !== null ? this.getPossibleColumnWidth() : MINIMUM_COLUMN_WIDTH + 'px';
40474059
this.columnList.forEach((column: IgxColumnComponent) => {
40484060
if (this.hasColumnLayouts && parseInt(this._columnWidth, 10)) {
40494061
const columnWidthCombined = parseInt(this._columnWidth, 10) * (column.colEnd ? column.colEnd - column.colStart : 1);
@@ -4198,9 +4210,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
41984210
parseInt(this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('width'), 10);
41994211
}
42004212

4201-
if (this.showRowCheckboxes) {
4202-
computedWidth -= this.headerCheckboxContainer ? this.headerCheckboxContainer.nativeElement.offsetWidth : 0;
4203-
}
4213+
computedWidth -= this.getFeatureColumnsWidth();
42044214

42054215
if (this.showDragIcons) {
42064216
computedWidth -= this.headerDragContainer ? this.headerDragContainer.nativeElement.offsetWidth : 0;
@@ -4264,20 +4274,39 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
42644274
}
42654275

42664276

4267-
if (!width) {
4268-
width = this.columnList.reduce((sum, item) => sum + parseInt((item.width || item.defaultWidth), 10), 0);
4277+
if (this.width === null || !width) {
4278+
width = this.getColumnWidthSum();
42694279
}
42704280

4271-
if (this.hasVerticalSroll()) {
4281+
if (this.hasVerticalSroll() && this.width !== null) {
42724282
width -= this.scrollWidth;
42734283
}
4274-
if (Number.isFinite(width) && width !== this.calcWidth) {
4284+
if ((Number.isFinite(width) || width === null) && width !== this.calcWidth) {
42754285
this.calcWidth = width;
42764286
this.cdr.detectChanges();
42774287
}
42784288
this._derivePossibleWidth();
42794289
}
42804290

4291+
private getColumnWidthSum(): number {
4292+
let colSum = 0;
4293+
const cols = this.hasColumnLayouts ?
4294+
this.visibleColumns.filter(x => x.columnLayout) : this.visibleColumns.filter(x => !x.columnGroup);
4295+
cols.forEach((item) => {
4296+
const isWidthInPercent = item.width && typeof item.width === 'string' && item.width.indexOf('%') !== -1;
4297+
if (isWidthInPercent) {
4298+
item.width = MINIMUM_COLUMN_WIDTH + 'px';
4299+
}
4300+
colSum += parseInt((item.width || item.defaultWidth), 10) || MINIMUM_COLUMN_WIDTH;
4301+
});
4302+
if (!colSum) {
4303+
return null;
4304+
}
4305+
this.cdr.detectChanges();
4306+
colSum += this.getFeatureColumnsWidth();
4307+
return colSum;
4308+
}
4309+
42814310
public hasVerticalSroll() {
42824311
if (!this._ngAfterViewInitPassed) { return false; }
42834312
const isScrollable = this.verticalScrollContainer.isScrollable();
@@ -4378,6 +4407,33 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
43784407
this.cdr.detectChanges();
43794408
this.resetCaches();
43804409
}
4410+
4411+
if (this.zone.isStable) {
4412+
this.zone.run(() => {
4413+
this._applyWidthHostBinding();
4414+
this.cdr.detectChanges();
4415+
});
4416+
} else {
4417+
this.zone.onStable.pipe(first()).subscribe(() => {
4418+
this.zone.run(() => {
4419+
this._applyWidthHostBinding();
4420+
});
4421+
});
4422+
}
4423+
}
4424+
4425+
private _applyWidthHostBinding() {
4426+
let width = this._width;
4427+
if (width === null) {
4428+
let currentWidth = this.calcWidth;
4429+
if (this.hasVerticalSroll()) {
4430+
currentWidth += this.scrollWidth;
4431+
}
4432+
width = currentWidth + 'px';
4433+
this.resetCaches();
4434+
}
4435+
this._hostWidth = width;
4436+
this.cdr.markForCheck();
43814437
}
43824438

43834439
/**
@@ -4428,7 +4484,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
44284484
protected getUnpinnedWidth(takeHidden = false) {
44294485
let width = this.isPercentWidth ?
44304486
this.calcWidth :
4431-
parseInt(this.width, 10);
4487+
parseInt(this.width, 10) || parseInt(this.hostWidth, 10) || this.calcWidth;
44324488
if (this.hasVerticalSroll() && !this.isPercentWidth) {
44334489
width -= this.scrollWidth;
44344490
}

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

Lines changed: 28 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1563,8 +1563,8 @@ describe('IgxGrid - Filtering actions', () => {
15631563

15641564
reset.nativeElement.focus();
15651565
inputGroup.nativeElement.dispatchEvent(new FocusEvent('focusout'));
1566+
await wait(100);
15661567
fix.detectChanges();
1567-
await wait(16);
15681568

15691569
expect(filterChip.componentInstance.selected).toBeFalsy();
15701570
});
@@ -1594,19 +1594,22 @@ describe('IgxGrid - Filtering actions', () => {
15941594
expect(filterChip).toBeTruthy();
15951595
expect(filterChip.componentInstance.selected).toBeTruthy();
15961596

1597-
filterChip.nativeElement.dispatchEvent(new MouseEvent('click'));
1597+
// Click on the chip to commit it
1598+
clickElemAndBlur(filterChip, input);
1599+
await wait(200);
15981600
fix.detectChanges();
1599-
await wait(16);
16001601
expect(filterChip.componentInstance.selected).toBeFalsy();
16011602

1602-
filterChip.nativeElement.dispatchEvent(new MouseEvent('click'));
1603+
// Click on the chip to select it
1604+
GridFunctions.clickChip(filterChip);
16031605
fix.detectChanges();
1604-
await wait(16);
1606+
await wait(100);
16051607
expect(filterChip.componentInstance.selected).toBeTruthy();
16061608

1607-
filterChip.nativeElement.dispatchEvent(new MouseEvent('click'));
1609+
// Click on the chip to commit it
1610+
clickElemAndBlur(filterChip, input);
1611+
await wait(100);
16081612
fix.detectChanges();
1609-
await wait(16);
16101613
expect(filterChip.componentInstance.selected).toBeFalsy();
16111614
});
16121615

@@ -1624,34 +1627,35 @@ describe('IgxGrid - Filtering actions', () => {
16241627
expect(filterChip).toBeTruthy();
16251628
expect(filterChip.componentInstance.selected).toBeTruthy();
16261629

1627-
filterChip.nativeElement.dispatchEvent(new MouseEvent('click'));
1630+
// Click on the chip to commit it
1631+
clickElemAndBlur(filterChip, input);
16281632
fix.detectChanges();
1629-
await wait(16);
1633+
await wait(100);
16301634
expect(filterChip.componentInstance.selected).toBeFalsy();
16311635

16321636
filterValue = 'c';
16331637
sendInput(input, filterValue, fix);
16341638
fix.detectChanges();
1635-
await wait(16);
1639+
await wait(100);
16361640

16371641
let filterChips = filterUIRow.queryAll(By.directive(IgxChipComponent));
16381642
expect(filterChips[1]).toBeTruthy();
16391643
expect(filterChips[1].componentInstance.selected).toBeTruthy();
16401644

16411645
GridFunctions.simulateKeyboardEvent(input, 'keydown', 'Enter');
16421646
fix.detectChanges();
1643-
await wait(16);
1647+
await wait(100);
16441648
expect(filterChips[1].componentInstance.selected).toBeFalsy();
16451649

16461650
let selectedColumn = GridFunctions.getColumnHeader('Downloads', fix);
16471651
selectedColumn.nativeElement.dispatchEvent(new MouseEvent('click'));
16481652
fix.detectChanges();
1649-
await wait(16);
1653+
await wait(100);
16501654

16511655
selectedColumn = GridFunctions.getColumnHeader('ProductName', fix);
16521656
selectedColumn.nativeElement.dispatchEvent(new MouseEvent('click'));
16531657
fix.detectChanges();
1654-
await wait(16);
1658+
await wait(100);
16551659

16561660
filterChips = filterUIRow.queryAll(By.directive(IgxChipComponent));
16571661
expect(filterChips[0].componentInstance.selected).toBeFalsy();
@@ -3572,7 +3576,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering', () => {
35723576
fix.detectChanges();
35733577

35743578
const headers: DebugElement[] = fix.debugElement.queryAll(By.directive(IgxGridHeaderGroupComponent));
3575-
const headerResArea = headers[2].children[0].nativeElement;
3579+
const headerResArea = headers[2].children[1].nativeElement;
35763580

35773581
const filterIcon = headerResArea.querySelector('.igx-excel-filter__icon');
35783582
filterIcon.click();
@@ -6080,3 +6084,13 @@ function verifyChipVisibility(fix, index: number, shouldBeFullyVisible: boolean)
60806084
expect(chipRect.left >= visibleChipAreaRect.left && chipRect.right <= visibleChipAreaRect.right)
60816085
.toBe(shouldBeFullyVisible, 'chip[' + index + '] visibility is incorrect');
60826086
}
6087+
6088+
function clickElemAndBlur(clickElem, blurElem) {
6089+
const elementRect = clickElem.nativeElement.getBoundingClientRect();
6090+
UIInteractions.simulatePointerEvent('pointerdown', clickElem.nativeElement, elementRect.left, elementRect.top);
6091+
blurElem.nativeElement.blur();
6092+
blurElem.nativeElement.dispatchEvent(new FocusEvent('focusout', {bubbles: true}));
6093+
(clickElem as DebugElement).nativeElement.focus();
6094+
UIInteractions.simulatePointerEvent('pointerup', clickElem.nativeElement, elementRect.left, elementRect.top);
6095+
UIInteractions.simulateMouseEvent('click', clickElem.nativeElement, 10 , 10);
6096+
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@
9696
<div igxGridBody (keydown.control.c)="copyHandlerIE()" (copy)="copyHandler($event)" class="igx-grid__tbody">
9797
<div class="igx-grid__tbody-content" role="rowgroup" (onDragStop)="selectionService.dragMode = $event"
9898
(onDragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
99-
[style.height.px]='calcHeight' [style.width.px]='calcWidth + 1' #tbody (scroll)='scrollHandler($event)'
99+
[style.height.px]='calcHeight' [style.width.px]='calcWidth ? calcWidth + 1 : null' #tbody (scroll)='scrollHandler($event)'
100100
(wheel)="wheelHandler()">
101101
<span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length <= 0"
102102
[igxColumnMovingDrop]="parentVirtDir" [attr.droppable]="true" id="left"
@@ -157,7 +157,7 @@
157157
[style.width.px]="scrollWidth"></div>
158158
</div>
159159

160-
<div class="igx-grid__scroll" [style.height]="'18px'" #scr [hidden]="unpinnedWidth - totalWidth >= 0">
160+
<div class="igx-grid__scroll" [style.height]="'18px'" #scr [hidden]="isHorizontalScrollHidden">
161161
<div class="igx-grid__scroll-start" [style.width.px]='pinnedWidth' [hidden]="pinnedWidth === 0"></div>
162162
<div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
163163
<ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>

0 commit comments

Comments
 (0)