[FIX] web: dropdown in modal in RTL mode

Be in Right to left

Open a m2o search more, to get onto the list modal
toggle the filters menu

Before this commit, the filters dropdown was almost invisble
and too much on the right anyway

This was because the RTL was not taken into account

After this commit, we anchor the dropdown on the right
(both as in good and as in side) side of its trigger button

Also, when modifying the dropdown, by developping the Custom Filter
we force the repositioning of the dropdown, to take those new elements
into account

It is expected though that after this commit, in RTL, the
dropdown in a modal that has a scrollbar (which is on the left)
will be slightly pushed to the right. It is usable and visible though
Some kind of plumbing using $el.data('offset', fn) from popper.js
is possible, but has been deemed not robust enough

Docs
https://getbootstrap.com/docs/4.0/components/dropdowns/#methods

OPW 2088934

X-original-commit: 105b4affd65ea23e1aa65b53f4595c174c9984ef

5 files changed, 40 insertions, 5 deletions

diff --git a/addons/web/static/src/js/views/control_panel/search/add_new_favorite_menu.js b/addons/web/static/src/js/views/control_panel/search/add_new_favorite_menu.js
index 07c80d38c29..6897b596471 100644
--- a/addons/web/static/src/js/views/control_panel/search/add_new_favorite_menu.js
+++ b/addons/web/static/src/js/views/control_panel/search/add_new_favorite_menu.js
@@ -108,6 +108,7 @@ var AddNewFavoriteMenu = Widget.extend({
     _toggleMenu: function () {
         this.isOpen = !this.isOpen;
         this._render();
+        this.trigger_up('favorite_submenu_toggled');
     },
 
     //--------------------------------------------------------------------------
diff --git a/addons/web/static/src/js/views/control_panel/search/favorite_menu.js b/addons/web/static/src/js/views/control_panel/search/favorite_menu.js
index 0a536820735..b2dc25d9327 100644
--- a/addons/web/static/src/js/views/control_panel/search/favorite_menu.js
+++ b/addons/web/static/src/js/views/control_panel/search/favorite_menu.js
@@ -10,6 +10,9 @@ var favorites_submenus_registry = require('web.favorites_submenus_registry');
 var _t = core._t;
 
 var FavoriteMenu = DropdownMenu.extend({
+    custom_events: _.extend({}, DropdownMenu.prototype.custom_events, {
+        favorite_submenu_toggled: '_onSubMenuToggled',
+    }),
     /**
      * @override
      * @param {Object} action
@@ -38,7 +41,7 @@ var FavoriteMenu = DropdownMenu.extend({
             favorites: this.items,
             action: this.action,
         };
-        this.$menu = this.$('.o_dropdown_menu');
+        var superProm = this._super.apply(this, arguments);
         this.$menu.addClass('o_favorites_menu');
         this.subMenus = [];
         favorites_submenus_registry.values().forEach(function (SubMenu) {
@@ -46,6 +49,7 @@ var FavoriteMenu = DropdownMenu.extend({
             subMenu.appendTo(self.$menu);
             self.subMenus.push(subMenu);
         });
+        return superProm;
     },
 
     //--------------------------------------------------------------------------
@@ -84,6 +88,21 @@ var FavoriteMenu = DropdownMenu.extend({
         this._closeSubMenus();
     },
     /**
+     * Reacts to a submenu being toggled
+     *
+     * When a submenu is toggled, it has changed the position
+     * and size of the Favorite's dropdown. This method
+     * repositions the current dropdown
+     *
+     * @private
+     * @param {OdooEvent} ev
+     *
+     */
+    _onSubMenuToggled: function (ev) {
+        ev.stopPropagation();
+        this.$dropdownReference.dropdown('update');
+    },
+    /**
      * @override
      * @private
      * @param {MouseEvent} event
diff --git a/addons/web/static/src/js/views/control_panel/search/filter_menu.js b/addons/web/static/src/js/views/control_panel/search/filter_menu.js
index d7f7a1c9950..1c81701a8e0 100644
--- a/addons/web/static/src/js/views/control_panel/search/filter_menu.js
+++ b/addons/web/static/src/js/views/control_panel/search/filter_menu.js
@@ -52,10 +52,10 @@ var FilterMenu = DropdownMenu.extend({
      * @override
      */
     start: function () {
-        this.$menu = this.$('.o_dropdown_menu');
+        var superProm = this._super.apply(this, arguments);
         this.$menu.addClass('o_filters_menu');
         this._renderGeneratorMenu();
-        return this._super.apply(this, arguments);
+        return superProm;
     },
 
     //--------------------------------------------------------------------------
@@ -108,6 +108,7 @@ var FilterMenu = DropdownMenu.extend({
         if (this.generatorMenuIsOpen && !this.propositions.length) {
             this._appendProposition();
         }
+        this.$dropdownReference.dropdown('update');
     },
     /**
      * Hide and display the submenu which allows adding custom filters.
diff --git a/addons/web/static/src/js/views/control_panel/search/groupby_menu.js b/addons/web/static/src/js/views/control_panel/search/groupby_menu.js
index 348e2e8fced..17c158dde87 100644
--- a/addons/web/static/src/js/views/control_panel/search/groupby_menu.js
+++ b/addons/web/static/src/js/views/control_panel/search/groupby_menu.js
@@ -76,10 +76,10 @@ var GroupByMenu = DropdownMenu.extend({
      * @override
      */
     start: function () {
-        this.$menu = this.$('.o_dropdown_menu');
+        var superProm = this._super.apply(this, arguments);
         this.$menu.addClass('o_group_by_menu');
         this._renderGeneratorMenu();
-        return this._super.apply(this, arguments);
+        return superProm;
     },
 
     //--------------------------------------------------------------------------
@@ -135,6 +135,7 @@ var GroupByMenu = DropdownMenu.extend({
         this.$menu.append($generatorMenu);
         this.$addCustomGroup = this.$menu.find('.o_add_custom_group');
         this.$groupSelector = this.$menu.find('.o_group_selector');
+        this.$dropdownReference.dropdown('update');
     },
     /**
      * @private
diff --git a/addons/web/static/src/js/widgets/dropdown_menu.js b/addons/web/static/src/js/widgets/dropdown_menu.js
index 11873718576..d8663731c67 100644
--- a/addons/web/static/src/js/widgets/dropdown_menu.js
+++ b/addons/web/static/src/js/widgets/dropdown_menu.js
@@ -6,6 +6,8 @@ var Widget = require('web.Widget');
 
 var QWeb = core.qweb;
 
+var _t = core._t;
+
 var DropdownMenu = Widget.extend({
     template: 'web.DropdownMenu',
 
@@ -37,7 +39,18 @@ var DropdownMenu = Widget.extend({
         this.items = items;
         this.openItems = {};
     },
+    /**
+     * @override
+     */
+    start: function () {
+        this.$menu = this.$('.o_dropdown_menu');
+        this.$dropdownReference = this.$('.o_dropdown_toggler_btn');
 
+         if (_t.database.parameters.direction === 'rtl') {
+            this.$menu.addClass('dropdown-menu-right');
+        }
+        return this._super.apply(this, arguments);
+    },
 
     //--------------------------------------------------------------------------
     // Public