pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] web: remove nagivating left, right, up and down from field to field using the arrow keys

Browse Source 
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
This commit is contained in:
Vincent Schippefilt
2018-09-25 16:49:22 +02:00
parent ac37ca39ea
commit 3dcf20284d
2 changed files with 5 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/js/views/list/list_editable_renderer.js
-26
View File
@@ -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})
addons/web/static/tests/views/list_tests.js
+5 -29
View File
@@ -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: '<tree editable="bottom"><field name="foo"/></tree>',
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();
});