[FIX] web: checkbox in favorites menu: don't close on click

Following f4fbaf1efa
which changes the label/checkbox structure into:
```
<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck1">
    <label class="custom-control-label" for="customCheck1">...</label>
</div>
```

So, before this commit, there may have been multiple input with the same Id.
The consequence is that, when clicking on a label, the browser would take the first Id it found
which was erroneous, because all checkboxes in Favorites menu had the same Id
In reality, the use case goes as:
- open a x2m,
- search more
- Favorites > Save current search
> click on one the two checkboxes
> The dropdown closed, without checking the box

After this commit, when clicking on the checkbox in the favorites menu
the checkbox is toggled and the dropdown stays. Also, the checkboxed have now unique ids

OPW 1974587

closes odoo/odoo#33032

Signed-off-by: Lucas Perais (lpe) <lpe@odoo.com>

addons/board/static/tests/dashboard_tests.js

@@ -5,6 +5,7 @@ var BoardView = require('board.BoardView');
 
 var ListController = require('web.ListController');
 var testUtils = require('web.test_utils');
+var testUtilsDom = require('web.test_utils_dom');
 var ListRenderer = require('web.ListRenderer');
 var pyUtils = require('web.py_utils');
 
@@ -740,18 +741,33 @@ QUnit.test('save two searches to dashboard', function (assert) {
     $('.o_searchview_extended_prop_value .o_input').val('a')
     $('.o_apply_filter').click();
     // Add it to dashboard
-    $('.o_add_to_dashboard_button').click();
+    testUtilsDom.click($('.o_search_options button:contains(Favorites)'));
+    $('.o_search_options .dropdown-menu.o_favorites_menu').one('click', function (ev) {
+        // This handler is on the webClient
+        // But since the test suite doesn't have one
+        // We manually set it here
+        ev.stopPropagation();
+    });
+    testUtilsDom.click($('.o_search_options .o_add_to_dashboard_link'));
+    testUtilsDom.click($('.o_add_to_dashboard_button'));
     // Remove it
     $('.o_facet_remove').click();
 
     // Add the second filter
     $('span.fa-filter').click();
-    $('span.fa-filter').click();
     $('.o_add_custom_filter:visible').click();
     $('.o_searchview_extended_prop_value .o_input').val('b')
     $('.o_apply_filter').click();
     // Add it to dashboard
-    $('.o_add_to_dashboard_button').click();
+    testUtilsDom.click($('.o_search_options button:contains(Favorites)'));
+    $('.o_search_options .dropdown-menu.o_favorites_menu').one('click', function (ev) {
+        // This handler is on the webClient
+        // But since the test suite doesn't have one
+        // We manually set it here
+        ev.stopPropagation();
+    });
+    testUtilsDom.click($('.o_search_options .o_add_to_dashboard_link'));
+    testUtilsDom.click($('.o_add_to_dashboard_button'));
 
     actionManager.destroy();
 });

addons/web/static/src/js/chrome/abstract_web_client.js

@@ -31,7 +31,9 @@ var qweb = core.qweb;
 
 var AbstractWebClient = Widget.extend(ServiceProviderMixin, KeyboardNavigationMixin, {
     dependencies: ['notification'],
-    events: _.extend(KeyboardNavigationMixin.events, {}),
+    events: _.extend({}, KeyboardNavigationMixin.events, {
+        'click .o_search_options .dropdown-menu': '_onClickDropDownMenu',
+    }),
     custom_events: {
         clear_uncommitted_changes: function (e) {
             this.clear_uncommitted_changes().then(e.data.callback);
@@ -331,6 +333,16 @@ var AbstractWebClient = Widget.extend(ServiceProviderMixin, KeyboardNavigationMi
     // Handlers
     //--------------------------------------------------------------------------
 
+    /**
+     * When clicking inside a dropdown to modify search options
+     * prevents the bootstrap dropdown to close on itself
+     *
+     * @private
+     * @param {Event} ev
+     */
+    _onClickDropDownMenu: function (ev) {
+        ev.stopPropagation();
+    },
     /**
      * Whenever the connection is lost, we need to notify the user.
      *

addons/web/static/src/js/chrome/control_panel.js

@@ -100,11 +100,6 @@ var ControlPanel = Widget.extend({
             $switch_buttons: this.$('.o_cp_switch_buttons'),
         };
 
-        // Prevent the search dropdowns to close when clicking inside them
-        this.$el.on('click.bs.dropdown', '.o_search_options .dropdown-menu', function (e) {
-            e.stopPropagation();
-        });
-
         // By default, hide the ControlPanel and remove its contents from the DOM
         this._toggle_visibility(false);
 

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

@@ -1359,16 +1359,17 @@
         <div role="menuitem" class="dropdown-item-text o_save_name">
             <input type="text" class="o_input"></input>
         </div>
+        <t t-set="favId" t-value="_.uniqueId('_checkbox_')" />
         <div role="menuitem" class="dropdown-item-text o_save_name">
             <div class="custom-control custom-checkbox">
-                <input type="checkbox" id="o_fav_menu_use_by_default" class="custom-control-input"/>
-                <label for="o_fav_menu_use_by_default" class="custom-control-label">Use by default</label>
+                <input type="checkbox" t-attf-id="o_fav_menu_use_by_default#{favId}" class="custom-control-input"/>
+                <label t-attf-for="o_fav_menu_use_by_default#{favId}" class="custom-control-label">Use by default</label>
             </div>
         </div>
         <div role="menuitem" class="dropdown-item-text o_save_name">
             <div class="custom-control custom-checkbox">
-                <input type="checkbox" id="o_fav_menu_share_all_users" class="custom-control-input"/>
-                <label for="o_fav_menu_share_all_users" class="custom-control-label">Share with all users <span class="fa fa-users" role="img" aria-label="Users" title="Users"/></label>
+                <input type="checkbox" t-attf-id="o_fav_menu_share_all_users#{favId}" class="custom-control-input"/>
+                <label t-attf-for="o_fav_menu_share_all_users#{favId}" class="custom-control-label">Share with all users <span class="fa fa-users" role="img" aria-label="Users" title="Users"/></label>
             </div>
         </div>
         <div class="dropdown-item-text o_save_name">

addons/web/static/tests/views/search_view_tests.js

@@ -3,6 +3,7 @@ odoo.define('web.search_view_tests', function (require) {
 
 var FormView = require('web.FormView');
 var testUtils = require('web.test_utils');
+var testUtilsDom = require('web.test_utils_dom');
 var createActionManager = testUtils.createActionManager;
 var patchDate = testUtils.patchDate;
 var createView = testUtils.createView;
@@ -1007,7 +1008,7 @@ QUnit.module('Search View', {
     });
 
     QUnit.test('Customizing filter does not close the filter dropdown', function (assert) {
-        assert.expect(4);
+        assert.expect(6);
         var self = this;
 
         _.each(this.data.partner.records.slice(), function (rec) {
@@ -1031,6 +1032,13 @@ QUnit.module('Search View', {
                 'partner,false,search': '<search><field name="date_field"/></search>',
             },
             res_id: 1,
+            intercepts: {
+                create_filter: function (ev) {
+                    var data = ev.data;
+                    assert.strictEqual(data.filter.name, 'Fire on the bayou');
+                    assert.strictEqual(data.filter.is_default, true);
+                },
+            },
         });
 
         form.$('.o_input').click();
@@ -1061,9 +1069,21 @@ QUnit.module('Search View', {
             $input.click();
             $input.click();
         });
-
         assert.ok($filterDropDown.is(':visible'));
 
+        // Favorites Menu
+        testUtilsDom.click($modal.find('.o_search_options button:contains(Favorites)'));
+        testUtilsDom.click($modal.find('.o_favorites_menu a:contains(Save current search)'));
+        $modal.find('.o_search_options .dropdown-menu').one('click', function (ev) {
+            // This handler is on the webClient
+            // But since the test suite doesn't have one
+            // We manually set it here
+            ev.stopPropagation();
+        });
+        $modal.find('.o_save_name:first input').val('Fire on the bayou');
+        testUtilsDom.click($modal.find('.o_save_name label:contains(Use by default)'));
+        testUtilsDom.click($modal.find('.o_save_name button:contains(Save)'));
+
         form.destroy();
     });