Skip to content

Commit c797ee3

Browse files
zdrawkuzdrawku
authored
Merge pull request #7212 from IgniteUI/rkaraivanov/skip-small-scrolls-logic
fix(for-of): Skip logic on small scrolls
2 parents f3c90eb + 067519b commit c797ee3

14 files changed

+59
-107
lines changed

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1216,19 +1216,21 @@ describe('igxCombo', () => {
12161216
fixture.detectChanges();
12171217
let items = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_DROPDOWNLISTITEM}`));
12181218
let lastItem = items[items.length - 1].componentInstance;
1219+
let lastItemIndex = lastItem.index;
12191220
expect(lastItem).toBeDefined();
12201221
lastItem.clicked(mockClick);
12211222
await wait(30);
12221223
fixture.detectChanges();
1223-
expect(dropdown.focusedItem).toEqual(lastItem);
1224+
expect(dropdown.focusedItem.index).toEqual(lastItemIndex);
12241225
dropdown.navigateItem(-1);
12251226
await wait(30);
12261227
fixture.detectChanges();
12271228
expect(virtualMockDOWN).toHaveBeenCalledTimes(0);
1229+
lastItemIndex = lastItem.index;
12281230
lastItem.clicked(mockClick);
12291231
await wait(30);
12301232
fixture.detectChanges();
1231-
expect(dropdown.focusedItem).toEqual(lastItem);
1233+
expect(dropdown.focusedItem.index).toEqual(lastItemIndex);
12321234
dropdown.navigateNext();
12331235
await wait(30);
12341236
fixture.detectChanges();

‎projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts‎

Lines changed: 1 addition & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -853,63 +853,17 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
853853
if (newStart + this.state.chunkSize > count) {
854854
newStart = count - this.state.chunkSize;
855855
}
856-
const prevStart = this.state.startIndex;
857856
const diff = newStart - this.state.startIndex;
858857
this.state.startIndex = newStart;
859858
if (diff) {
860859
this.onChunkPreload.emit(this.state);
861860
if (!this.isRemote) {
862-
/*recalculate and apply page size.*/
863-
if (diff > 0 && diff <= this.MAX_PERF_SCROLL_DIFF) {
864-
this.moveApplyScrollNext(prevStart);
865-
} else if (diff < 0 && Math.abs(diff) <= this.MAX_PERF_SCROLL_DIFF) {
866-
this.moveApplyScrollPrev(prevStart);
867-
} else {
868-
this.fixedApplyScroll();
869-
}
861+
this.fixedApplyScroll();
870862
}
871863
}
872864
return inScrollTop - this.sizesCache[this.state.startIndex];
873865
}
874866

875-
/**
876-
* @hidden
877-
* The function applies an optimized state change for scrolling down/right employing context change with view rearrangement
878-
*/
879-
protected moveApplyScrollNext(prevIndex: number): void {
880-
const start = prevIndex + this.state.chunkSize;
881-
for (let i = start; i < start + this.state.startIndex - prevIndex && this.igxForOf[i] !== undefined; i++) {
882-
this._moveApply(i);
883-
}
884-
}
885-
886-
/**
887-
*
888-
*/
889-
protected _moveApply(contextIndex: number, topPosition = false) {
890-
const context = this.igxForOf[contextIndex];
891-
const forOfContext = new IgxForOfContext<T>(context, this.getContextIndex(context), this.igxForOf.length);
892-
const view = this.dc.instance._vcr.createEmbeddedView(this._template, forOfContext, topPosition ? 0 : undefined);
893-
this.dc.instance._vcr.detach(topPosition ? this.dc.instance._vcr.length - 1 : 0);
894-
if (topPosition) {
895-
this._embeddedViews.pop();
896-
this._embeddedViews.unshift(view);
897-
} else {
898-
this._embeddedViews.shift();
899-
this._embeddedViews.push(view);
900-
}
901-
}
902-
903-
/**
904-
* @hidden
905-
* The function applies an optimized state change for scrolling up/left employing context change with view rearrangement
906-
*/
907-
protected moveApplyScrollPrev(prevIndex: number): void {
908-
for (let i = prevIndex - 1; i >= this.state.startIndex && this.igxForOf[i] !== undefined; i--) {
909-
this._moveApply(i, true);
910-
}
911-
}
912-
913867
/**
914868
* @hidden
915869
*/

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,21 @@
1111
<ng-template #inlineEditor let-cell="cell">
1212
<ng-container *ngIf="column.dataType === 'string'">
1313
<igx-input-group displayDensity="compact">
14-
<input igxInput [value]="editValue" (input)="editValue = $event.target.value" [igxFocus]="true" />
14+
<input igxInput [value]="editValue" (input)="editValue = $event.target.value" [igxFocus]="focused" />
1515
</igx-input-group>
1616
</ng-container>
1717
<ng-container *ngIf="column.dataType === 'number'">
1818
<igx-input-group displayDensity="compact">
19-
<input igxInput [value]="editValue" (input)="editValue = $event.target.value" [igxFocus]="true" type="number">
19+
<input igxInput [value]="editValue" (input)="editValue = $event.target.value" [igxFocus]="focused" type="number">
2020
</igx-input-group>
2121
</ng-container>
2222
<ng-container *ngIf="column.dataType === 'boolean'">
2323
<igx-checkbox (change)="editValue = $event.checked" [value]="editValue" [checked]="editValue"
24-
[igxFocus]="true" [disableRipple]="true"></igx-checkbox>
24+
[igxFocus]="focused" [disableRipple]="true"></igx-checkbox>
2525
</ng-container>
2626
<ng-container *ngIf="column.dataType === 'date'">
2727
<igx-date-picker [style.width.%]="100" [outlet]="grid.outletDirective" mode="dropdown"
28-
[locale]="grid.locale" [(value)]="editValue" [igxFocus]="true" [labelVisibility]="false">
28+
[locale]="grid.locale" [(value)]="editValue" [igxFocus]="focused" [labelVisibility]="false">
2929
</igx-date-picker>
3030
</ng-container>
3131
</ng-template>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,6 @@ export class IgxFilteringService implements OnDestroy {
105105
this._overlayService.onClosed.pipe(
106106
filter(overlay => overlay.id === this._componentOverlayId),
107107
takeUntil(this.destroy$)).subscribe(() => {
108-
console.log('Close');
109108
this._componentOverlayId = null;
110109
this.grid.theadRow.nativeElement.focus();
111110
});

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

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
ColumnEditablePropertyTestComponent
1414
} from '../../test-utils/grid-samples.spec';
1515
import { DebugElement } from '@angular/core';
16+
import { setupGridScrollDetection } from '../../test-utils/helper-utils.spec';
1617

1718
const DEBOUNCETIME = 30;
1819
const CELL_CSS_CLASS = '.igx-grid__td';
@@ -381,35 +382,31 @@ describe('IgxGrid - Cell Editing #grid', () => {
381382
});
382383

383384
it('When cell in editMode and try to navigate with `ArrowUp` - focus should remain over the input.', (async () => {
384-
const verticalScroll = grid.verticalScrollContainer.getScroll();
385-
let expectedScroll;
386-
let cellElem;
387-
GridFunctions.scrollTop(grid, 1000);
388-
await wait(500);
385+
let cell = grid.getCellByColumn(0, 'firstName' );
386+
UIInteractions.simulateClickAndSelectEvent(cell);
387+
fixture.detectChanges();
388+
GridFunctions.simulateGridContentKeydown(fixture, 'ArrowDown', false, false, true);
389+
await wait(100);
389390
fixture.detectChanges();
390391

391-
const testCells = grid.getColumnByName('firstName').cells;
392-
const cell = testCells[testCells.length - 1];
393-
cellElem = cell.nativeElement;
394-
395-
cellElem.dispatchEvent(new Event('focus'));
396-
cellElem.dispatchEvent(new MouseEvent('dblclick'));
392+
cell = grid.getCellByColumn(8, 'firstName' );
393+
UIInteractions.simulateDoubleClickAndSelectEvent(cell);
394+
await wait(DEBOUNCETIME);
397395
fixture.detectChanges();
398-
await wait(50);
399396

400-
let inputElem: HTMLInputElement = document.activeElement as HTMLInputElement;
397+
const inputElem: HTMLInputElement = document.activeElement as HTMLInputElement;
401398
expect(cell.editMode).toBeTruthy();
402-
expect(cellElem.classList.contains(CELL_CLASS_IN_EDIT_MODE)).toBe(true);
403-
expectedScroll = verticalScroll.scrollTop;
399+
expect(cell.nativeElement.classList.contains(CELL_CLASS_IN_EDIT_MODE)).toBe(true);
400+
const expectedScroll = grid.verticalScrollContainer.getScroll().scrollTop;
404401

405402
UIInteractions.triggerKeyDownEvtUponElem('ArrowUp', inputElem, true);
406-
fixture.detectChanges();
407403
await wait(DEBOUNCETIME);
404+
fixture.detectChanges();
408405

409-
inputElem = document.activeElement as HTMLInputElement;
406+
cell = grid.getCellByColumn(8, 'firstName' );
410407
expect(cell.editMode).toBeTruthy();
411-
expect(cellElem.classList.contains(CELL_CLASS_IN_EDIT_MODE)).toBe(true);
412-
expect(verticalScroll.scrollTop).toBe(expectedScroll);
408+
expect(cell.nativeElement.classList.contains(CELL_CLASS_IN_EDIT_MODE)).toBe(true);
409+
expect(grid.verticalScrollContainer.getScroll().scrollTop).toBe(expectedScroll);
413410
}));
414411

415412
it('When cell in editMode and try to navigate with `ArrowRight` - focus should remain over the input.', (async () => {

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1373,7 +1373,7 @@ describe('IgxGrid - Cell selection #grid', () => {
13731373
GridSelectionFunctions.verifyCellSelected(cell);
13741374
expect(grid.selectedCells.length).toBe(1);
13751375

1376-
const row = grid.getRowByIndex(3);
1376+
let row = grid.getRowByIndex(3);
13771377
expect(row instanceof IgxGridGroupByRowComponent).toBe(true);
13781378
expect(row.focused).toBe(true);
13791379

@@ -1399,6 +1399,7 @@ describe('IgxGrid - Cell selection #grid', () => {
13991399
await wait(100);
14001400
fix.detectChanges();
14011401

1402+
row = grid.getRowByIndex(3);
14021403
expect(selectionChangeSpy).toHaveBeenCalledTimes(2);
14031404
expect(grid.selectedCells.length).toBe(4);
14041405
expect(row instanceof IgxGridGroupByRowComponent).toBe(true);

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -374,7 +374,7 @@ describe('IgxGrid Master Detail #grid', () => {
374374
});
375375

376376
it('Should navigate down through a detail view partially out of view by scrolling it so it becomes fully visible.', async() => {
377-
const row = grid.getRowByIndex(4) as IgxGridRowComponent;
377+
let row = grid.getRowByIndex(4) as IgxGridRowComponent;
378378
const targetCellElement = grid.getCellByColumn(4, 'ContactName');
379379
UIInteractions.simulateClickAndSelectEvent(targetCellElement);
380380
fix.detectChanges();
@@ -383,6 +383,7 @@ describe('IgxGrid Master Detail #grid', () => {
383383
await wait(DEBOUNCETIME);
384384
fix.detectChanges();
385385

386+
row = grid.getRowByIndex(4) as IgxGridRowComponent;
386387
const detailRow = GridFunctions.getMasterRowDetail(row);
387388
GridFunctions.verifyMasterDetailRowFocused(detailRow);
388389
expect(GridFunctions.elementInGridView(grid, detailRow)).toBeTruthy();
@@ -395,7 +396,7 @@ describe('IgxGrid Master Detail #grid', () => {
395396
await wait(DEBOUNCETIME);
396397
fix.detectChanges();
397398

398-
const row = grid.getRowByIndex(6) as IgxGridRowComponent;
399+
let row = grid.getRowByIndex(6) as IgxGridRowComponent;
399400
const targetCellElement = grid.getCellByColumn(6, 'ContactName');
400401
UIInteractions.simulateClickAndSelectEvent(targetCellElement);
401402
fix.detectChanges();
@@ -407,6 +408,7 @@ describe('IgxGrid Master Detail #grid', () => {
407408
await wait(DEBOUNCETIME);
408409
fix.detectChanges();
409410

411+
row = grid.getRowByIndex(6) as IgxGridRowComponent;
410412
const detailRow = GridFunctions.getMasterRowDetail(row);
411413
GridFunctions.verifyMasterDetailRowFocused(detailRow);
412414
expect(GridFunctions.elementInGridView(grid, detailRow)).toBeTruthy();
@@ -455,15 +457,16 @@ describe('IgxGrid Master Detail #grid', () => {
455457
await wait(DEBOUNCETIME);
456458
fix.detectChanges();
457459

458-
const row = grid.getRowByIndex(2);
460+
let row = grid.getRowByIndex(2);
459461
const targetCellElement = grid.getCellByColumn(2, 'ContactName');
460462
UIInteractions.simulateClickAndSelectEvent(targetCellElement);
461463
fix.detectChanges();
462464

463465
UIInteractions.triggerEventHandlerKeyDown('ArrowUp', gridContent);
464-
fix.detectChanges();
465466
await wait(DEBOUNCETIME);
467+
fix.detectChanges();
466468

469+
row = grid.getRowByIndex(2);
467470
const detailRow = row.element.nativeElement.previousElementSibling as HTMLElement;
468471
GridFunctions.verifyMasterDetailRowFocused(detailRow);
469472
expect(GridFunctions.elementInGridView(grid, detailRow)).toBeTruthy();

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -606,7 +606,7 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => {
606606
await wait(100);
607607
fixture.detectChanges();
608608

609-
const lastCell = grid.rowList.first.cells.toArray()[6];
609+
const lastCell = grid.rowList.first.cells.toArray()[5];
610610
expect(lastCell.column.field).toBe('Address');
611611
expect(lastCell.column.parent.field).toBe('group4');
612612
expect(Math.round(lastCell.nativeElement.getBoundingClientRect().right) -

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

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { By } from '@angular/platform-browser';
1010
import { IgxHierarchicalRowComponent } from './hierarchical-row.component';
1111
import { setupHierarchicalGridScrollDetection } from '../../test-utils/helper-utils.spec';
1212
import { GridFunctions } from '../../test-utils/grid-functions.spec';
13-
import { IgxGridCellComponent, IGridCellEventArgs } from '../grid';
13+
import { IGridCellEventArgs } from '../grid';
1414
import { IgxChildGridRowComponent } from './child-grid-row.component';
1515

1616
const DEBOUNCE_TIME = 60;
@@ -610,17 +610,14 @@ describe('IgxHierarchicalGrid Basic Navigation #hGrid', () => {
610610
hierarchicalGrid.getColumnByName('ID').hidden = true;
611611
await wait(50);
612612
fixture.detectChanges();
613-
hierarchicalGrid.navigateTo(2);
614-
await wait(DEBOUNCE_TIME);
615-
fixture.detectChanges();
616613

617-
const cell = hierarchicalGrid.getCellByColumn(2, 'ChildLevels');
614+
const cell = hierarchicalGrid.getCellByColumn(0, 'ChildLevels');
618615
UIInteractions.simulateDoubleClickAndSelectEvent(cell);
619616
fixture.detectChanges();
620617
await wait(DEBOUNCE_TIME);
621618
fixture.detectChanges();
622619

623-
UIInteractions.triggerKeyDownEvtUponElem('tab', cell.nativeElement, true, false, true);
620+
UIInteractions.triggerEventHandlerKeyDown('tab', baseHGridContent, false, true, false);
624621
await wait(DEBOUNCE_TIME);
625622
fixture.detectChanges();
626623
const activeEl = document.activeElement;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -334,7 +334,7 @@ it('should update scroll height after expanding/collapsing row in a nested child
334334
expect(childRowComponent.index).toBe(4);
335335

336336
hierarchicalGrid.verticalScrollContainer.scrollNext();
337-
await wait(100);
337+
await wait(200);
338338
fixture.detectChanges();
339339
childRowComponent = fixture.debugElement.query(By.css('igx-child-grid-row')).componentInstance;
340340
expect(childRowComponent.rowData.rowID).toBe('3');

0 commit comments

Comments
 (0)