[FIX] web: properly handle tab navigation with widgets in edit

Rev. https://github.com/odoo/odoo/commit/c5f8f35747b4ca9633c664d6be74614c5ce22fcd
introduced a regression: the input of widgets 'email' and 'url' was not correctly
focused anymore with tab navigation.

The method `getFocusableElement` on their common parent (`InputField`) has not been
correctly overriden because `_super``was not called in edit mode.
This commit is contained in:
Martin Geubelle
2017-06-20 11:17:35 +02:00
parent 98100b85dc
commit 28b67ee7dc
2 changed files with 11 additions and 4 deletions
@@ -828,7 +828,7 @@ var FieldEmail = InputField.extend({
* @override
*/
getFocusableElement: function () {
return this.mode === 'readonly' && this.$el || $();
return this.mode === 'readonly' ? this.$el : this._super.apply(this, arguments);
},
//--------------------------------------------------------------------------
@@ -940,7 +940,7 @@ var UrlWidget = InputField.extend({
* @override
*/
getFocusableElement: function () {
return this.mode === 'readonly' && this.$el || $();
return this.mode === 'readonly' ? this.$el : this._super.apply(this, arguments);
},
//--------------------------------------------------------------------------
+9 -2
View File
@@ -3244,7 +3244,7 @@ QUnit.module('Views', {
});
QUnit.test('navigation with tab key in form view', function (assert) {
assert.expect(2);
assert.expect(3);
var form = createView({
View: FormView,
@@ -3253,8 +3253,9 @@ QUnit.module('Views', {
arch: '<form string="Partners">' +
'<sheet>' +
'<group>' +
'<field name="foo"/>' +
'<field name="foo" widget="email"/>' +
'<field name="bar"/>' +
'<field name="display_name" widget="url"/>' +
'</group>' +
'</sheet>' +
'</form>',
@@ -3266,12 +3267,18 @@ QUnit.module('Views', {
// focus first input, trigger tab
form.$('input[name="foo"]').focus();
form.$('input[name="foo"]').trigger($.Event('keydown', {which: $.ui.keyCode.TAB}));
assert.ok($.contains(form.$('div[name="bar"]')[0], document.activeElement),
"bar checkbox should be focused");
form.$('div[name="bar"]').trigger($.Event('keydown', {which: $.ui.keyCode.TAB}));
assert.strictEqual(form.$('input[name="display_name"]')[0], document.activeElement,
"display_name should be focused");
// simulate shift+tab on active element
$(document.activeElement).trigger($.Event('keydown', {which: $.ui.keyCode.TAB, shiftKey: true}));
$(document.activeElement).trigger($.Event('keydown', {which: $.ui.keyCode.TAB, shiftKey: true}));
assert.strictEqual(document.activeElement, form.$('input[name="foo"]')[0],
"first input should be focused");