[FIX] web: properly handle tab navigation in readonly

The tab navigation was only working in edit mode. Entering a readonly form
view with input fields was causing a traceback.

As the default browser behaviour has been overriden with custom navigation,
we need to specify which widget can be focused (e.g.: url, many2one, etc.).

2 files changed, 47 insertions, 6 deletions

diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index ef1832e00d6..79654cc3095 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -285,11 +285,15 @@ var InputField = DebouncedField.extend({
      */
     _onNavigationMove: function (ev) {
         this._super.apply(this, arguments);
-        var input = this.$input[0];
-        var selecting = (input.selectionEnd !== input.selectionStart);
-        if ((ev.data.direction === "left" && (selecting || input.selectionStart !== 0))
-         || (ev.data.direction === "right" && (selecting || input.selectionStart !== input.value.length))) {
-            ev.stopPropagation();
+
+        // the following code only makes sense in edit mode, with an input
+        if (this.mode === 'edit') {
+            var input = this.$input[0];
+            var selecting = (input.selectionEnd !== input.selectionStart);
+            if ((ev.data.direction === "left" && (selecting || input.selectionStart !== 0))
+             || (ev.data.direction === "right" && (selecting || input.selectionStart !== input.value.length))) {
+                ev.stopPropagation();
+            }
         }
     },
 });
@@ -815,6 +819,19 @@ var FieldEmail = InputField.extend({
     },
 
     //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * Returns the associated link.
+     *
+     * @override
+     */
+    getFocusableElement: function () {
+        return this.mode === 'readonly' && this.$el || $();
+    },
+
+    //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
 
@@ -849,6 +866,17 @@ var FieldPhone = FieldEmail.extend({
             this.tagName = 'span';
         }
     },
+    /**
+     * Returns the associated link only if there is one.
+     *
+     * @override
+     */
+    getFocusableElement: function () {
+        if (this._canCall()) {
+            return this._super.apply(this, arguments);
+        }
+        return $();
+    },
 
     //--------------------------------------------------------------------------
     // Private
@@ -903,6 +931,19 @@ var UrlWidget = InputField.extend({
     },
 
     //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * Returns the associated link.
+     *
+     * @override
+     */
+    getFocusableElement: function () {
+        return this.mode === 'readonly' && this.$el || $();
+    },
+
+    //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
 
diff --git a/addons/web/static/src/js/fields/relational_fields.js b/addons/web/static/src/js/fields/relational_fields.js
index 95bef29f88e..35addc4a091 100644
--- a/addons/web/static/src/js/fields/relational_fields.js
+++ b/addons/web/static/src/js/fields/relational_fields.js
@@ -124,7 +124,7 @@ var FieldMany2One = AbstractField.extend({
      * @returns {jQuery}
      */
     getFocusableElement: function () {
-        return this.$input || $();
+        return this.mode === 'edit' && this.$input || this.$el;
     },
     /**
      * TODO