[FIX] web: handle field selector closing/opening correctly

Ironically, clicking on the dropdown arrow of the field selector was
the only way which was not opening the dropdown. It was indeed added
as pure design element.
This commit handles the opening and closing of the dropdown in a more
robust way... while simplyfing the code too.

addons/web/static/src/js/widgets/model_field_selector.js

@@ -10,32 +10,14 @@ var ModelFieldSelector = Widget.extend({
     template: "FieldSelector",
     events: {
         // Handle popover opening and closing
-        "focusin input, .o_field_selector_popover": function (e) {
-            if (this._hidePopoverTimeout !== undefined) {
-                clearTimeout(this._hidePopoverTimeout);
-                this._hidePopoverTimeout = undefined;
-                return;
-            }
-            if (this.$input.is(e.currentTarget)) {
-                this.showPopover();
-            }
+        "focusin": function () {
+            clearTimeout(this._hidePopoverTimeout);
+            this.showPopover();
         },
-        "focusout input, .o_field_selector_popover": function () {
-            if (this._hidePopoverTimeout !== undefined) {
-                return;
-            }
-            this._hidePopoverTimeout = setTimeout((function () {
-                this.hidePopover();
-                this._hidePopoverTimeout = undefined;
-            }).bind(this), 100);
-        },
-        "click .o_field_selector_close": function () {
-            if (this._hidePopoverTimeout !== undefined) {
-                clearTimeout(this._hidePopoverTimeout);
-                this._hidePopoverTimeout = undefined;
-            }
-            this.hidePopover();
+        "focusout": function () {
+            this._hidePopoverTimeout = _.defer(this.hidePopover.bind(this));
         },
+        "click .o_field_selector_close": "hidePopover",
 
         // Handle popover field navigation
         "click .o_field_selector_prev_page": "goToPrevPage",
@@ -183,16 +165,20 @@ var ModelFieldSelector = Widget.extend({
         this.valid = valid;
     },
     /// The showPopover method shows the popover to select the field chain. It prepares the popover pages
-    /// before actually showing it.
+    /// before actually showing it. (if already open, does nothing)
     showPopover: function () {
+        if (this._isOpen) return;
+        this._isOpen = true;
         this._prefill().then((function () {
             this.displayPage();
             this.$popover.removeClass("hidden");
         }).bind(this));
     },
     /// The hidePopover method closes the popover and mark the field as selected. If the field chain changed,
-    /// it notifies its parents.
+    /// it notifies its parents. (if not open, does nothing)
     hidePopover: function () {
+        if (!this._isOpen) return;
+        this._isOpen = false;
         this.$popover.addClass("hidden");
         this.isSelected = true;
         if (this.dirty) {

addons/web/static/src/less/model_field_selector.less

@@ -6,10 +6,10 @@
         .o-position-absolute(0, 0, 1px);
         .o-flex-display();
         .o-align-items(center);
+        cursor: pointer;
 
         &::after {
             .o-caret-down();
-            cursor: pointer;
         }
     }
     .o_field_selector_popover {

addons/web/static/src/xml/base.xml

@@ -803,7 +803,7 @@
 
 <div t-name="FieldSelector" class="o_field_selector">
     <input type="text" t-att-value="widget.chain" t-att-readonly="!(widget.debug) and 1 or None"/>
-    <div class="o_field_selector_controls">
+    <div class="o_field_selector_controls" tabindex="0">
         <i class="fa fa-exclamation-triangle o_field_selector_warning hidden" title="Invalid field chain"/>
     </div>
     <div class="o_field_selector_popover hidden" tabindex="0">