Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

DataGrid - KeyboardNavigation - Replace pointerUp with pointerDown #11900

Merged
merged 5 commits into from
Feb 6, 2020
Merged

DataGrid - KeyboardNavigation - Replace pointerUp with pointerDown #11900

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c22a230
DataGrid - KeyboardNavigation - Replace pointerUp with pointerDown
AntonSermyazhko Feb 5, 2020
2ed2ffe
Fix fileManager tests
AntonSermyazhko Feb 5, 2020
b3b00c9
Fix treeList tests
AntonSermyazhko Feb 5, 2020
e6b3e62
Fix tests in FF
AntonSermyazhko Feb 5, 2020
556adef
Fix IE test
AntonSermyazhko Feb 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 5 additions & 18 deletions js/ui/grid_core/ui.grid_core.keyboard_navigation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,6 @@ const KeyboardNavigationController = core.ViewController.inherit({
_initViewHandlers: function() {
const that = this;
const pointerDownAction = that.createAction(that._pointerDownHandler);
const pointerUpAction = that.createAction(that._clickHandler);
const rowsView = that.getView('rowsView');

rowsView.renderCompleted.add(function(e) {
Expand All @@ -142,9 +141,6 @@ const KeyboardNavigationController = core.ViewController.inherit({
eventsEngine.off($rowsView, eventUtils.addNamespace(pointerEvents.down, 'dxDataGridKeyboardNavigation'), pointerDownAction);
eventsEngine.on($rowsView, eventUtils.addNamespace(pointerEvents.down, 'dxDataGridKeyboardNavigation'), clickSelector, pointerDownAction);

eventsEngine.off($rowsView, eventUtils.addNamespace(pointerEvents.up, 'dxDataGridKeyboardNavigation'), pointerUpAction);
eventsEngine.on($rowsView, eventUtils.addNamespace(pointerEvents.up, 'dxDataGridKeyboardNavigation'), clickSelector, pointerUpAction);

that._initKeyDownHandler($rowsView, e => that._keyDownHandler(e));

that._setRowsViewAttributes($rowsView);
Expand Down Expand Up @@ -721,7 +717,7 @@ const KeyboardNavigationController = core.ViewController.inherit({
// #endregion Key_Handlers

// #region Click_Handler
_clickHandler: function(e) {
_pointerDownHandler: function(e) {
const event = e.event;
let $target = $(event.currentTarget);
const rowsView = this.getView('rowsView');
Expand Down Expand Up @@ -755,19 +751,6 @@ const KeyboardNavigationController = core.ViewController.inherit({
this._resetFocusedCell();
}
},
_isEventInCurrentGrid: function(event) {
return isElementInCurrentGrid(this, $(event.target));
},

_pointerDownHandler: function(e) {
const $target = $(e.event.target);
const isEditRow = $target.closest('tr').hasClass(EDIT_ROW_CLASS);

if(!isEditRow) {
const $targetCell = $target.closest('td');
$targetCell.addClass(CELL_FOCUS_DISABLED_CLASS);
}
},

_clickTargetCellHandler: function(event, $cell) {
const columnIndex = this.getView('rowsView').getCellIndex($cell);
Expand Down Expand Up @@ -1550,6 +1533,10 @@ const KeyboardNavigationController = core.ViewController.inherit({
},
// #endregion Events

_isEventInCurrentGrid: function(event) {
return isElementInCurrentGrid(this, $(event.target));
},

_isRowEditMode: function() {
const editMode = this.getController('editing').getEditMode();
return editMode === EDIT_MODE_ROW || editMode === EDIT_MODE_FORM;
Expand Down
2 changes: 1 addition & 1 deletion testing/functional/tests/dataGrid/keyboardNavigation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { Selector } from 'testcafe';
fixture `Keyboard Navigation`
.page(url(__dirname, '../container.html'));

test("Cell should not highlighted after editing another cell when startEditAction is 'dblClick' and 'batch' edit mode", async t => {
test("Cell should not highlighted after editing another cell when startEditAction: dblClick and editing.mode: batch", async t => {
const dataGrid = new DataGrid("#container");

await t
Expand Down
7 changes: 3 additions & 4 deletions testing/helpers/grid/keyboardNavigationHelper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ export function setupModules(that, modulesOptions, gridModules) {
});
}

export const CLICK_EVENT = eventUtils.addNamespace(pointerEvents.up, 'dxDataGridKeyboardNavigation');
export const CLICK_EVENT = eventUtils.addNamespace(pointerEvents.down, 'dxDataGridKeyboardNavigation');
const device = devices.real();
const KEYS = {
'tab': 'Tab',
Expand Down Expand Up @@ -152,9 +152,8 @@ export function fireKeyDown($target, key, ctrlKey) {
}

export function focusCell(columnIndex, rowIndex) {
const $element0 = this.rowsView.element();
const $row = $($element0.find('.dx-row')[rowIndex]);
$($row.find('td')[columnIndex]).trigger(CLICK_EVENT);
const $cell = $(this.rowsView.getCellElement(rowIndex, columnIndex));
$cell.trigger(CLICK_EVENT);
}

export function getTextSelection(element) {
Expand Down
143 changes: 53 additions & 90 deletions testing/tests/DevExpress.ui.widgets.dataGrid/dataGrid.tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,8 @@ import themes from 'ui/themes';
import DataGridWrapper from '../../helpers/wrappers/dataGridWrappers.js';
import { checkDxFontIcon, DX_ICON_XLSX_FILE_CONTENT_CODE, DX_ICON_EXPORT_SELECTED_CONTENT_CODE } from '../../helpers/checkDxFontIconHelper.js';
import 'ui/scroll_view';
import { CLICK_EVENT } from '../../helpers/grid/keyboardNavigationHelper.js';


const DX_STATE_HOVER_CLASS = 'dx-state-hover';
const TEXTEDITOR_INPUT_SELECTOR = '.dx-texteditor-input';
Expand Down Expand Up @@ -4453,16 +4455,14 @@ QUnit.test('Cell should not be unfocused after click on it while editing with ro
QUnit.test('onFocusedCellChanged event should contains correct row object if scrolling, rowRenderingMode are virtual', function(assert) {
// arrange
const data = [];
let dataGrid;
let focusedCellChangedCount = 0;
let scrollable;

for(let i = 0; i < 50; i++) {
data.push({ id: i + 1 });
}

// arrange
dataGrid = $('#dataGrid').dxDataGrid({
const dataGrid = $('#dataGrid').dxDataGrid({
height: 150,
keyExpr: 'id',
dataSource: data,
Expand All @@ -4485,11 +4485,11 @@ QUnit.test('onFocusedCellChanged event should contains correct row object if scr
this.clock.tick();

// act
scrollable = dataGrid.getScrollable();
const scrollable = dataGrid.getScrollable();
scrollable.scrollTo({ y: 600 });
$(scrollable._container()).trigger('scroll');
this.clock.tick();
$(dataGrid.getCellElement(0, 0)).trigger(pointerEvents.up);
$(dataGrid.getCellElement(0, 0)).trigger(CLICK_EVENT);
this.clock.tick();

// assert
Expand Down Expand Up @@ -4555,9 +4555,9 @@ QUnit.test('Row should be focused after click on readonly cell if editor is open
}).dxDataGrid('instance');

// act
$(dataGrid.getCellElement(0, 1)).trigger(pointerEvents.up);
$(dataGrid.getCellElement(0, 1)).trigger(CLICK_EVENT);
dataGrid.editCell(0, 1);
$(dataGrid.getCellElement(1, 0)).trigger(pointerEvents.up);
$(dataGrid.getCellElement(1, 0)).trigger(CLICK_EVENT);

// assert
assert.equal(dataGrid.option('focusedRowIndex'), 1, 'focusedRowIndex');
Expand Down Expand Up @@ -7697,7 +7697,7 @@ QUnit.test('contentReady should not be raised on row click', function(assert) {
assert.equal(contentReadyCallCount, 1, 'one contentReady on start');

// act
$(dataGrid.getCellElement(0, 0)).trigger(pointerEvents.up);
$(dataGrid.getCellElement(0, 0)).trigger(CLICK_EVENT);

// assert
assert.ok(dataGrid);
Expand Down Expand Up @@ -7743,7 +7743,7 @@ QUnit.test('contentReady should not be raised on row click if focusedRowEnabled'
assert.equal(contentReadyCallCount, 1, 'one contentReady on start');

// act
$(dataGrid.getCellElement(0, 0)).trigger(pointerEvents.up);
$(dataGrid.getCellElement(0, 0)).trigger(CLICK_EVENT);

// assert
assert.ok(dataGrid);
Expand Down Expand Up @@ -7779,7 +7779,7 @@ QUnit.test('onFocusedRowChanged event should fire only once if paging and init p
assert.equal(focusedRowChangedCallCount, 1, 'focusedRowChangedCallCount');
});

QUnit.test('onFocusedRowChanged event should not fire on init if focusedRowEnabled is true and focusedRowIndex, focusedRowKey aren\'t set', function(assert) {
QUnit.test('onFocusedRowChanged event should not fire on init if focusedRowEnabled is true and focusedRowIndex, focusedRowKey are not set', function(assert) {
let focusedRowChangedCallCount = 0;
const dataGrid = createDataGrid({
onFocusedRowChanged: function() {
Expand All @@ -7796,7 +7796,7 @@ QUnit.test('onFocusedRowChanged event should not fire on init if focusedRowEnabl
assert.equal(focusedRowChangedCallCount, 0, 'focusedRowChangedCallCount');

// act
$(dataGrid.getCellElement(0, 0)).trigger(pointerEvents.up);
$(dataGrid.getCellElement(0, 0)).trigger(CLICK_EVENT);
// assert
assert.equal(focusedRowChangedCallCount, 1, 'focusedRowChangedCallCount');
});
Expand All @@ -7821,7 +7821,7 @@ QUnit.test('Click by the first row on the next page should focus it without grid
sinon.spy(dataSource, 'load');

// act
$(dataGrid.getCellElement(2, 1)).trigger(pointerEvents.up);
$(dataGrid.getCellElement(2, 1)).trigger(CLICK_EVENT);

// assert
assert.equal(dataGrid.option('focusedRowIndex'), 2, 'focusedRowIndex');
Expand Down Expand Up @@ -13979,7 +13979,7 @@ QUnit.test('Focused cell position has correct value when focus grouping row cell
};

// act
$(dataGrid.getCellElement(2, 2)).trigger(pointerEvents.up);
$(dataGrid.getCellElement(2, 2)).trigger(CLICK_EVENT);

assert.deepEqual(keyboardNavigationController._focusedCellPosition, {
columnIndex: 2,
Expand Down Expand Up @@ -14049,7 +14049,7 @@ QUnit.test('Focused cell position has correct value when focus grouping row with
};

// act
$(dataGrid.getCellElement(1, 1)).trigger(pointerEvents.up);
$(dataGrid.getCellElement(1, 1)).trigger(CLICK_EVENT);

// assert
assert.deepEqual(keyboardNavigationController._focusedCellPosition, {
Expand Down Expand Up @@ -18470,7 +18470,7 @@ QUnit.testInActiveWindow('Not highlight cell if isHighlighted set false in the o
this.clock.tick();

$(this.dataGrid.getCellElement(0, 0))
.trigger(pointerEvents.up)
.trigger(CLICK_EVENT)
.click();
this.clock.tick();

Expand Down Expand Up @@ -18920,7 +18920,7 @@ QUnit.test('onFocusedRowChanging, onFocusedRowChanged event if click selection c
});

// act
rowsViewWrapper.getSelectionCheckBoxElement(1).trigger(pointerEvents.up);
rowsViewWrapper.getSelectionCheckBoxElement(1).trigger(CLICK_EVENT);
this.clock.tick();

// assert
Expand Down Expand Up @@ -18956,7 +18956,7 @@ QUnit.test('Cancel focused row if click selection checkBox (T812681)', function(
assert.equal(dataGrid.option('focusedRowIndex'), -1, 'focusedRowIndex');

// act
rowsViewWrapper.getSelectionCheckBoxElement(1).trigger(pointerEvents.up);
rowsViewWrapper.getSelectionCheckBoxElement(1).trigger(CLICK_EVENT);
this.clock.tick();

// assert
Expand All @@ -18966,84 +18966,47 @@ QUnit.test('Cancel focused row if click selection checkBox (T812681)', function(
assert.equal(dataGrid.option('focusedRowIndex'), -1, 'focusedRowIndex');
});

QUnit.test('DataGrid - Focus updating on refresh should be correct for focused row if editing mode is cell (T830334)', function(assert) {
// arrange
let counter = 0;
const rowsViewWrapper = dataGridWrapper.rowsView;
const dataGrid = createDataGrid({
loadingTimeout: undefined,
height: 100,
dataSource: [
{ name: 'Alex', phone: '111111', room: 1 },
{ name: 'Dan', phone: '2222222', room: 2 },
{ name: 'Ben', phone: '333333', room: 3 },
{ name: 'Sean', phone: '4545454', room: 4 },
{ name: 'Smith', phone: '555555', room: 5 },
{ name: 'Zeb', phone: '6666666', room: 6 }
],
editing: {
mode: 'cell',
allowUpdating: true
},
keyExpr: 'name',
focusedRowEnabled: true
});

dataGrid.getView('rowsView').scrollToElementVertically = function($row) {
++counter;
assert.equal($row.find('td').eq(0).text(), 'Zeb', 'Row');
};
['batch', 'cell'].forEach(editMode => {
QUnit.test(`DataGrid - Focus updating on refresh should be correct for focused row if ${editMode} edit mode (T830334)`, function(assert) {
// arrange
let counter = 0;
const rowsViewWrapper = dataGridWrapper.rowsView;
const dataGrid = createDataGrid({
loadingTimeout: undefined,
height: 100,
dataSource: [
{ name: 'Alex', phone: '111111', room: 1 },
{ name: 'Dan', phone: '2222222', room: 2 },
{ name: 'Ben', phone: '333333', room: 3 },
{ name: 'Sean', phone: '4545454', room: 4 },
{ name: 'Smith', phone: '555555', room: 5 },
{ name: 'Zeb', phone: '6666666', room: 6 }
],
editing: {
mode: editMode,
allowUpdating: true
},
keyExpr: 'name',
focusedRowEnabled: true
});

// act
dataGrid.getScrollable().scrollBy({ y: 400 });
$(dataGrid.getCellElement(5, 1))
.trigger(pointerEvents.up)
.trigger('dxclick');
dataGrid.getView('rowsView').scrollToElementVertically = function($row) {
++counter;
assert.equal($row.find('td').eq(0).text(), 'Zeb', 'Row');
};

// assert
assert.ok(rowsViewWrapper.getEditorInput(5, 1).length, 'Cell[5, 1] is in editing mode');
assert.ok(rowsViewWrapper.isFocusedRow(5), 'Row 5 is focused');
assert.equal(counter, 2, 'scrollToElementVertically called twice');
});
// act
dataGrid.getScrollable().scrollBy({ y: 400 });
$(dataGrid.getCellElement(5, 1))
.trigger(CLICK_EVENT)
.trigger('dxclick');

QUnit.test('DataGrid - Focus updating on refresh should be correct for focused row if editing mode is batch (T830334)', function(assert) {
// arrange
let counter = 0;
const rowsViewWrapper = dataGridWrapper.rowsView;
const dataGrid = createDataGrid({
loadingTimeout: undefined,
height: 100,
dataSource: [
{ name: 'Alex', phone: '111111', room: 1 },
{ name: 'Dan', phone: '2222222', room: 2 },
{ name: 'Ben', phone: '333333', room: 3 },
{ name: 'Sean', phone: '4545454', room: 4 },
{ name: 'Smith', phone: '555555', room: 5 },
{ name: 'Zeb', phone: '6666666', room: 6 }
],
editing: {
mode: 'batch',
allowUpdating: true
},
keyExpr: 'name',
focusedRowEnabled: true
// assert
assert.ok(rowsViewWrapper.getEditorInput(5, 1).length, 'Cell[5, 1] is in editing mode');
assert.ok(rowsViewWrapper.isFocusedRow(5), 'Row 5 is focused');
assert.equal(counter, 2, 'scrollToElementVertically called twice');
});

dataGrid.getView('rowsView').scrollToElementVertically = function($row) {
++counter;
assert.equal($row.find('td').eq(0).text(), 'Zeb', 'Row');
};

// act
dataGrid.getScrollable().scrollBy({ y: 400 });
$(dataGrid.getCellElement(5, 1))
.trigger(pointerEvents.up)
.trigger('dxclick');

// assert
assert.ok(rowsViewWrapper.getEditorInput(5, 1).length, 'Cell[5, 1] is in editing mode');
assert.ok(rowsViewWrapper.isFocusedRow(5), 'Row 5 is focused');
assert.equal(counter, 2, 'scrollToElementVertically called twice');
});

QUnit.test('Popup should apply data changes after editorOptions changing (T817880)', function(assert) {
Expand Down
Loading