From 3dcf20284df9fb411a7093537ccd645a34543b20 Mon Sep 17 00:00:00 2001 From: Vincent Schippefilt Date: Mon, 3 Sep 2018 13:16:52 +0200 Subject: [PATCH] [IMP] web: remove nagivating left, right, up and down from field to field using the arrow keys The idea for this change is that there are different behaviors when using the keyboard inside an editable list: when the focus is at the end of a text field, it moves the focus to the right cell when pressing right, but not when the focus is in the middle of the field. Also, moving up from within a multiline text field was incoherent. In order to simplify the keyboard navigation, only TAB is used to move from field to field inside and outside a editable list. Task id : 1872248 --- .../js/views/list/list_editable_renderer.js | 26 -------------- addons/web/static/tests/views/list_tests.js | 34 +++---------------- 2 files changed, 5 insertions(+), 55 deletions(-) diff --git a/addons/web/static/src/js/views/list/list_editable_renderer.js b/addons/web/static/src/js/views/list/list_editable_renderer.js index 0951b3f0cc6..9cfd6f0cd61 100644 --- a/addons/web/static/src/js/views/list/list_editable_renderer.js +++ b/addons/web/static/src/js/views/list/list_editable_renderer.js @@ -847,12 +847,6 @@ ListRenderer.include({ /** * Handles the keyboard navigation according to events triggered by field * widgets. - * - up/down: move to the cell above/below if any, or the first activable - * one on the row above/below if any on the right of this cell - * above/below (if none on the right, wrap to the beginning of the - * line). - * - left/right: move to the first activable cell on the left/right if any - * (wrap to the end/beginning of the line if necessary). * - previous: move to the first activable cell on the left if any, if not * move to the rightmost activable cell on the row above. * - next: move to the first activable cell on the right if any, if not move @@ -868,26 +862,6 @@ ListRenderer.include({ _onNavigationMove: function (ev) { ev.stopPropagation(); // stop the event, the action is done by this renderer switch (ev.data.direction) { - case 'up': - if (this.currentRow > 0) { - this._selectCell(this.currentRow - 1, this.currentFieldIndex); - } - break; - case 'right': - if (this.currentFieldIndex + 1 < this.columns.length) { - this._selectCell(this.currentRow, this.currentFieldIndex + 1); - } - break; - case 'down': - if (this.currentRow < this.state.data.length - 1) { - this._selectCell(this.currentRow + 1, this.currentFieldIndex); - } - break; - case 'left': - if (this.currentFieldIndex > 0) { - this._selectCell(this.currentRow, this.currentFieldIndex - 1); - } - break; case 'previous': if (this.currentFieldIndex > 0) { this._selectCell(this.currentRow, this.currentFieldIndex - 1, {wrap: false}) diff --git a/addons/web/static/tests/views/list_tests.js b/addons/web/static/tests/views/list_tests.js index cafd529b47c..fedb878a669 100644 --- a/addons/web/static/tests/views/list_tests.js +++ b/addons/web/static/tests/views/list_tests.js @@ -2499,30 +2499,6 @@ QUnit.module('Views', { list.destroy(); }); - QUnit.test('inputs are disabled when unselecting rows', function (assert) { - assert.expect(1); - - var list = createView({ - View: ListView, - model: 'foo', - data: this.data, - arch: '', - mockRPC: function (route, args) { - if (args.method === 'write') { - assert.strictEqual($input.prop('disabled'), true, - "input should be disabled"); - } - return this._super.apply(this, arguments); - }, - }); - - list.$('td:contains(gnap)').click(); - var $input = list.$('tr.o_selected_row input[name="foo"]'); - $input.val('lemon').trigger('input'); - $input.trigger({type: 'keydown', which: $.ui.keyCode.DOWN}); - list.destroy(); - }); - QUnit.test('navigation with tab and readonly field', function (assert) { // This test makes sure that if we have 2 cells in a row, the first in // edit mode, and the second one readonly, then if we press TAB when the @@ -2737,7 +2713,7 @@ QUnit.module('Views', { list.destroy(); }); - QUnit.test('navigation: moving down with keydown', function (assert) { + QUnit.test('navigation: not moving down with keydown', function (assert) { assert.expect(2); var list = createView({ @@ -2751,12 +2727,12 @@ QUnit.module('Views', { assert.ok(list.$('tr.o_data_row:eq(0)').hasClass('o_selected_row'), "1st row should be selected"); list.$('tr.o_selected_row input[name="foo"]').trigger({type: 'keydown', which: $.ui.keyCode.DOWN}); - assert.ok(list.$('tr.o_data_row:eq(1)').hasClass('o_selected_row'), - "2nd row should be selected"); + assert.ok(list.$('tr.o_data_row:eq(0)').hasClass('o_selected_row'), + "1st row should still be selected"); list.destroy(); }); - QUnit.test('navigation: moving right with keydown from text field', function (assert) { + QUnit.test('navigation: moving right with keydown from text field does not move the focus', function (assert) { assert.expect(6); this.data.foo.fields.foo.type = 'text'; @@ -2785,7 +2761,7 @@ QUnit.module('Views', { assert.ok(textarea.selectionStart === 3 && textarea.selectionEnd === 3, "textarea value ('yop') should not be selected and cursor should be at the end"); $(textarea).trigger({type: 'keydown', which: $.ui.keyCode.RIGHT}); - assert.strictEqual(document.activeElement, list.$('[name="bar"] input')[0], + assert.strictEqual(document.activeElement, list.$('textarea[name="foo"]')[0], "next field (checkbox) should now be focused"); list.destroy(); });