From e0c2a876bdb51e60b0d7083028284bb1f879c73e Mon Sep 17 00:00:00 2001 From: Anton Sermyazhko Date: Mon, 25 Mar 2019 15:23:17 +0300 Subject: [PATCH] DataGrid - Enter key should move to the next row if prressed in the last cell and enterKeyDirection is 'row' (#7408) --- .../ui.grid_core.keyboard_navigation.js | 28 ++-- .../focus.tests.js | 126 ++++++++++++++++++ 2 files changed, 145 insertions(+), 9 deletions(-) diff --git a/js/ui/grid_core/ui.grid_core.keyboard_navigation.js b/js/ui/grid_core/ui.grid_core.keyboard_navigation.js index 4eb5f5dc5742..eb3818cdec35 100644 --- a/js/ui/grid_core/ui.grid_core.keyboard_navigation.js +++ b/js/ui/grid_core/ui.grid_core.keyboard_navigation.js @@ -497,15 +497,25 @@ var KeyboardNavigationController = core.ViewController.inherit({ } } else { - if(isEditing || !this._allowEditingOnEnterKey()) { - this._handleEnterKeyEditingCell(eventArgs.originalEvent); - var direction = this._getEnterKeyDirection(eventArgs); - if(direction) { - this._navigateNextCell(eventArgs.originalEvent, direction); - } - } else { - this._startEditing(eventArgs); + this._processEnterKeyForDataCell(eventArgs, isEditing); + } + }, + + _processEnterKeyForDataCell: function(eventArgs, isEditing) { + var direction; + + if(isEditing || !this._allowEditingOnEnterKey()) { + this._handleEnterKeyEditingCell(eventArgs.originalEvent); + + direction = this._getEnterKeyDirection(eventArgs); + if(direction === "next" || direction === "previous") { + this._targetCellTabHandler(eventArgs, direction); + } else if(direction === "upArrow" || direction === "downArrow") { + this._navigateNextCell(eventArgs.originalEvent, direction); } + + } else { + this._startEditing(eventArgs); } }, @@ -517,7 +527,7 @@ var KeyboardNavigationController = core.ViewController.inherit({ return isShift ? "upArrow" : "downArrow"; } if(enterKeyDirection === "row") { - return isShift ? "previousInRow" : "nextInRow"; + return isShift ? "previous" : "next"; } }, diff --git a/testing/tests/DevExpress.ui.widgets.dataGrid/focus.tests.js b/testing/tests/DevExpress.ui.widgets.dataGrid/focus.tests.js index b3507043fff4..373059b3049b 100644 --- a/testing/tests/DevExpress.ui.widgets.dataGrid/focus.tests.js +++ b/testing/tests/DevExpress.ui.widgets.dataGrid/focus.tests.js @@ -3790,6 +3790,132 @@ QUnit.testInActiveWindow("Changing row index by Enter key navigation if 'enterKe assert.notOk(this.editingController.isEditing(), "Is editing"); }); +QUnit.testInActiveWindow("Enter key navigation from the last cell should navigate to the new row and first column if 'enterKeyDirection' is 'row', 'enterKeyAction' is 'startEdit'", function(assert) { + var rowsView, + keyboardController, + focusedCellChangingCounter = 0; + + // arrange + this.$element = function() { + return $("#container"); + }; + + this.data = [ + { name: "Alex", phone: "111111", room: 6 }, + { name: "Dan", phone: "2222222", room: 5 }, + { name: "Ben", phone: "333333", room: 4 }, + { name: "Sean", phone: "4545454", room: 3 }, + { name: "Smith", phone: "555555", room: 2 }, + { name: "Zeb", phone: "6666666", room: 1 } + ]; + + this.options = { + keyExpr: "name", + editing: { + allowEditing: true, + allowUpdating: true + }, + keyboardNavigation: { + enterKeyAction: "startEdit", + enterKeyDirection: "row" + }, + onFocusedCellChanging: function(e) { + ++focusedCellChangingCounter; + } + }; + + this.setupModule(); + + this.gridView.render($("#container")); + this.clock.tick(); + + $(this.getCellElement(1, 2)).trigger("dxpointerdown").click(); + this.clock.tick(); + + rowsView = this.gridView.getView("rowsView"); + keyboardController = this.getController("keyboardNavigation"); + keyboardController._focusedView = rowsView; + + // assert + assert.equal(keyboardController.getVisibleRowIndex(), 1, "FocusedRowIndex"); + assert.equal(keyboardController.getFocusedColumnIndex(), 2, "FocusedColumnIndex"); + // act, assert + this.triggerKeyDown("enter", false, false, rowsView.getRow(1).find("td:focus")); + this.clock.tick(); + assert.ok(keyboardController.isCellFocusType(), "Cell focus type"); + assert.equal(keyboardController.getVisibleRowIndex(), 1, "Focused row index"); + assert.equal(keyboardController.getFocusedColumnIndex(), 2, "FocusedColumnIndex"); + assert.equal(focusedCellChangingCounter, 1, "focusedCellChanging count"); + assert.ok(this.editingController.isEditing(), "Is editing"); + // act, assert + this.triggerKeyDown("enter", false, false, rowsView.getRow(1).find("td:focus")); + this.clock.tick(); + assert.ok(keyboardController.isCellFocusType(), "Cell focus type"); + assert.equal(keyboardController.getVisibleRowIndex(), 2, "Focused row index"); + assert.equal(keyboardController.getFocusedColumnIndex(), 0, "FocusedColumnIndex"); + assert.equal(focusedCellChangingCounter, 2, "focusedCellChanging count"); + assert.notOk(this.editingController.isEditing(), "Is editing"); +}); + +QUnit.testInActiveWindow("Enter key navigation from the last cell should navigate to the new row and first column if 'enterKeyDirection' is 'row', 'enterKeyAction' is 'moveFocus'", function(assert) { + var rowsView, + keyboardController, + focusedCellChangingCounter = 0; + + // arrange + this.$element = function() { + return $("#container"); + }; + + this.data = [ + { name: "Alex", phone: "111111", room: 6 }, + { name: "Dan", phone: "2222222", room: 5 }, + { name: "Ben", phone: "333333", room: 4 }, + { name: "Sean", phone: "4545454", room: 3 }, + { name: "Smith", phone: "555555", room: 2 }, + { name: "Zeb", phone: "6666666", room: 1 } + ]; + + this.options = { + keyExpr: "name", + editing: { + allowEditing: true, + allowUpdating: true + }, + keyboardNavigation: { + enterKeyAction: "moveFocus", + enterKeyDirection: "row" + }, + onFocusedCellChanging: function(e) { + ++focusedCellChangingCounter; + } + }; + + this.setupModule(); + + this.gridView.render($("#container")); + this.clock.tick(); + + $(this.getCellElement(1, 2)).trigger("dxpointerdown").click(); + this.clock.tick(); + + rowsView = this.gridView.getView("rowsView"); + keyboardController = this.getController("keyboardNavigation"); + keyboardController._focusedView = rowsView; + + // assert + assert.equal(keyboardController.getVisibleRowIndex(), 1, "FocusedRowIndex"); + assert.equal(keyboardController.getFocusedColumnIndex(), 2, "FocusedColumnIndex"); + // act, assert + this.triggerKeyDown("enter", false, false, rowsView.getRow(1).find("td:focus")); + this.clock.tick(); + assert.ok(keyboardController.isCellFocusType(), "Cell focus type"); + assert.equal(keyboardController.getVisibleRowIndex(), 2, "Focused row index"); + assert.equal(keyboardController.getFocusedColumnIndex(), 0, "FocusedColumnIndex"); + assert.equal(focusedCellChangingCounter, 2, "focusedCellChanging count"); + assert.notOk(this.editingController.isEditing(), "Is editing"); +}); + QUnit.testInActiveWindow("Test navigateToRow method if paging", function(assert) { var keyboardController;