Skip to content

Commit f0ecdd9

Browse files
tongsonbarbstongsonbarbs
authored
DataGrid - Scrolling position is reset to far right on an attempt to scroll left if the most right cell is focused using the keyboard (T1277214) (DevExpress#29374)
1 parent b9b0614 commit f0ecdd9

File tree

5 files changed

+51
-19
lines changed

5 files changed

+51
-19
lines changed

‎e2e/testcafe-devextreme/tests/dataGrid/scrolling.ts‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1749,7 +1749,7 @@ test('DataGrid - Gray boxes appear when the push method is used to remove rows i
17491749
});
17501750
});
17511751

1752-
// T1262288
1752+
// T1262288 - Left to Right
17531753
test('DataGrid - Focused cell moves to the end of the table after horizontal scrolling', async (t) => {
17541754
const dataGrid = new DataGrid('#container');
17551755

@@ -1778,3 +1778,33 @@ test('DataGrid - Focused cell moves to the end of the table after horizontal scr
17781778
enabled: false,
17791779
},
17801780
}));
1781+
1782+
// T1277214 - Right to Left
1783+
test('DataGrid - Scrolling position is reset to far right on an attempt to scroll left if the most right cell is focused using the keyboard', async (t) => {
1784+
const dataGrid = new DataGrid('#container');
1785+
await dataGrid.scrollTo(t, { x: 1000 });
1786+
await t
1787+
.click(dataGrid.getDataCell(0, 20).element)
1788+
.pressKey('right');
1789+
1790+
await t.expect(dataGrid.getDataCell(0, 20).isFocused).ok();
1791+
1792+
await dataGrid.scrollBy({ x: -1000 });
1793+
await dataGrid.scrollBy({ x: 1000 });
1794+
1795+
await t.expect(dataGrid.getDataCell(0, 20).isFocused).ok();
1796+
}).before(async () => createWidget('dxDataGrid', {
1797+
dataSource: getData(1, 20).map((item, index) => ({ ...item, id: index })),
1798+
keyExpr: 'id',
1799+
columnWidth: 100,
1800+
showBorders: true,
1801+
focusedRowEnabled: true,
1802+
scrolling: {
1803+
columnRenderingMode: 'virtual',
1804+
mode: 'virtual',
1805+
showScrollbar: 'always',
1806+
},
1807+
paging: {
1808+
enabled: false,
1809+
},
1810+
}));

‎packages/devextreme/js/__internal/grids/grid_core/data_controller/m_data_controller.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -499,6 +499,7 @@ export class DataController extends DataHelperMixin(modules.Controller) {
499499
that._columnsController.columnsChanged.remove(updateItemsHandler);
500500
that.updateItems({
501501
repaintChangesOnly: false,
502+
event: change?.changeTypes?.event,
502503
virtualColumnsScrolling: change?.changeTypes?.virtualColumnsScrolling,
503504
});
504505
};

‎packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -289,7 +289,9 @@ export class KeyboardNavigationController extends modules.ViewController {
289289
? !isAppend
290290
: this._isHiddenFocus && isFullUpdate && !e?.virtualColumnsScrolling;
291291
if (needUpdateFocus) {
292-
this._updateFocus(true);
292+
const isScrollEvent = !!e?.event?.type;
293+
const skipFocusEvent = e?.virtualColumnsScrolling && isScrollEvent;
294+
this._updateFocus(true, skipFocusEvent);
293295
}
294296
}
295297
}
@@ -301,9 +303,7 @@ export class KeyboardNavigationController extends modules.ViewController {
301303

302304
if (!$focusedElement.length && e?.virtualColumnsScrolling) {
303305
const focusedColumnIndex = this._focusedCellPosition?.columnIndex ?? -1;
304-
const focusedColumnIndexWithoutOffset = focusedColumnIndex - this._getFocusedColumnIndexOffset(focusedColumnIndex);
305-
306-
return focusedColumnIndexWithoutOffset >= 0;
306+
return this._isColumnRendered(focusedColumnIndex);
307307
}
308308

309309
return true;
@@ -1518,7 +1518,7 @@ export class KeyboardNavigationController extends modules.ViewController {
15181518
}
15191519
}
15201520

1521-
public _updateFocus(isRenderView?) {
1521+
public _updateFocus(isRenderView?, skipFocusEvent = false) {
15221522
this._updateFocusTimeout = setTimeout(() => {
15231523
if (this._needFocusEditingCell()) {
15241524
this._editingController._focusEditingCell();
@@ -1557,12 +1557,12 @@ export class KeyboardNavigationController extends modules.ViewController {
15571557
);
15581558
return;
15591559
}
1560-
!isFocusedElementDefined && this._focus($cell);
1560+
!isFocusedElementDefined && this._focus($cell, false, skipFocusEvent);
15611561
} else if (
15621562
!isFocusedElementDefined
15631563
&& (this._isNeedFocus || this._isHiddenFocus)
15641564
) {
1565-
this._focus($cell, this._isHiddenFocus);
1565+
this._focus($cell, this._isHiddenFocus, skipFocusEvent);
15661566
}
15671567
if (isEditing && !column?.showEditorAlways) {
15681568
this._focusInteractiveElement.bind(this)($cell);
@@ -1958,7 +1958,6 @@ export class KeyboardNavigationController extends modules.ViewController {
19581958
const isShowWhenGrouped = column && column.showWhenGrouped;
19591959
const isDataCell = column && !$cell.hasClass(COMMAND_EXPAND_CLASS) && isDataRow($row);
19601960
const isValidGroupSpaceColumn = function () {
1961-
// eslint-disable-next-line radix
19621961
return (
19631962
(!isMasterDetailRow
19641963
&& column

‎packages/devextreme/js/__internal/grids/grid_core/virtual_columns/m_virtual_columns.ts‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const rowsView = (Base: ModuleType<RowsView>) => class VirtualColumnsRowsViewExt
5151
}
5252

5353
// @ts-expect-error
54-
that._columnsController.setScrollPosition(left);
54+
that._columnsController.setScrollPosition(left, e.event);
5555
}
5656

5757
protected _renderCore(e) {
@@ -179,11 +179,13 @@ const columns = (Base: ModuleType<ColumnsController>) => class VirtualColumnsCon
179179
return this.option('scrolling.columnPageSize');
180180
}
181181

182-
private _fireColumnsChanged() {
182+
private _fireColumnsChanged(event?) {
183183
const date: any = new Date();
184184
this.columnsChanged.fire({
185185
optionNames: { all: true, length: 1 },
186-
changeTypes: { columns: true, virtualColumnsScrolling: true, length: 2 },
186+
changeTypes: {
187+
columns: true, virtualColumnsScrolling: true, length: 2, event,
188+
},
187189
});
188190
this._renderTime = (new Date()) as any - date;
189191
}
@@ -200,17 +202,17 @@ const columns = (Base: ModuleType<ColumnsController>) => class VirtualColumnsCon
200202
return scrollingTimeout;
201203
}
202204

203-
private setScrollPosition(position) {
205+
private setScrollPosition(position, event?) {
204206
const scrollingTimeout = this.getScrollingTimeout();
205207

206208
if (scrollingTimeout > 0) {
207209
clearTimeout(this._changedTimeout);
208210

209211
this._changedTimeout = setTimeout(() => {
210-
this._setScrollPositionCore(position);
212+
this._setScrollPositionCore(position, event);
211213
}, scrollingTimeout);
212214
} else {
213-
this._setScrollPositionCore(position);
215+
this._setScrollPositionCore(position, event);
214216
}
215217
}
216218

@@ -222,7 +224,7 @@ const columns = (Base: ModuleType<ColumnsController>) => class VirtualColumnsCon
222224
this._setScrollPositionCore(this._position);
223225
}
224226

225-
private _setScrollPositionCore(position) {
227+
private _setScrollPositionCore(position, event?) {
226228
const that = this;
227229

228230
if (that.isVirtualMode()) {
@@ -234,7 +236,7 @@ const columns = (Base: ModuleType<ColumnsController>) => class VirtualColumnsCon
234236
if (needColumnsChanged) {
235237
that._beginPageIndex = beginPageIndex;
236238
that._endPageIndex = endPageIndex;
237-
that._fireColumnsChanged();
239+
that._fireColumnsChanged(event);
238240
}
239241
}
240242
}

‎packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/virtualColumns.tests.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -385,7 +385,7 @@ QUnit.module('Scrolling', { beforeEach: setupModule, afterEach: teardownModule }
385385
this.columnsController.columnsChanged.add(e => {
386386
assert.deepEqual(e, {
387387
optionNames: { all: true, length: 1 },
388-
changeTypes: { columns: true, virtualColumnsScrolling: true, length: 2 }
388+
changeTypes: { columns: true, virtualColumnsScrolling: true, length: 2, event: undefined }
389389
}, 'columnsChanged args');
390390
columnsChangedPositions.push(pos);
391391
});
@@ -413,7 +413,7 @@ QUnit.module('Scrolling', { beforeEach: setupModule, afterEach: teardownModule }
413413
this.columnsController.columnsChanged.add(e => {
414414
assert.deepEqual(e, {
415415
optionNames: { all: true, length: 1 },
416-
changeTypes: { columns: true, virtualColumnsScrolling: true, length: 2 }
416+
changeTypes: { columns: true, virtualColumnsScrolling: true, length: 2, event: undefined }
417417
}, 'columnsChanged args');
418418
columnsChangedPositions.push(pos);
419419
});

0 commit comments

Comments
 (0)