[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

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');
     },
 
     //--------------------------------------------------------------------------

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;
     },
 
     //--------------------------------------------------------------------------
@@ -83,6 +87,21 @@ var FavoriteMenu = DropdownMenu.extend({
         this._super.apply(this, arguments);
         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

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.

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

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