[FIX] web: tab navigation with phone widgets in form view

This commit ensures that tab navigation works properly when editing a
form view that contains input fields with phone widgets. Previously,
pressing TAB would skip those fields.

2 files changed, 28 insertions, 1 deletions

diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index f2c7fcf37cd..1097039ba2c 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -924,7 +924,7 @@ var FieldPhone = FieldEmail.extend({
      * @override
      */
     getFocusableElement: function () {
-        if (this._canCall()) {
+        if (this.mode !== 'readonly' || this._canCall()) {
             return this._super.apply(this, arguments);
         }
         return $();
diff --git a/addons/web/static/tests/fields/basic_fields_tests.js b/addons/web/static/tests/fields/basic_fields_tests.js
index 0dd11e549bd..b7d78afda73 100644
--- a/addons/web/static/tests/fields/basic_fields_tests.js
+++ b/addons/web/static/tests/fields/basic_fields_tests.js
@@ -2771,6 +2771,33 @@ QUnit.module('basic_fields', {
         form.destroy();
     });
 
+    QUnit.test('use TAB to navigate to a phone field', function (assert) {
+        assert.expect(2);
+
+        var form = createView({
+            View: FormView,
+            model: 'partner',
+            data: this.data,
+            arch:'<form string="Partners">' +
+                    '<sheet>' +
+                        '<group>' +
+                            '<field name="display_name"/>' +
+                            '<field name="foo" widget="phone"/>' +
+                        '</group>' +
+                    '</sheet>' +
+                '</form>',
+        });
+
+        form.$('input[name=display_name]').click();
+        assert.strictEqual(form.$('input[name="display_name"]')[0], document.activeElement,
+            "display_name should be focused");
+        form.$('input[name="display_name"]').trigger($.Event('keydown', {which: $.ui.keyCode.TAB}));
+        assert.strictEqual(form.$('input[name="foo"]')[0], document.activeElement,
+            "foo should be focused");
+
+        form.destroy();
+    });
+
     QUnit.module('PriorityWidget');
 
     QUnit.test('priority widget when not set', function (assert) {