[FIX] web_editor: close widgets when clicking on dropdown buttons

The commit fixes an issue with the editor toolbars dropdowns, that would
not close already opened widgets. For example, when the widget color
picker for snippets background was open, opening the one from the editor
toolbar for the font would only close it for the first click, but not
for the ones after.

The issue was coming from Bootstrap, which stops the propagation of
click events for dropdowns. As a result, the click event on these
'.dropdown-toggle' elements was not processed by the listener at the
SnippetsMenu level, in charge of closing the widgets that were already
open in this context. It was the case only for the first click that was
instancing a Dropdown, but not for the ones after.
https://github.com/odoo/odoo/blame/cd9c071c9357cef14635ef094a9f14fc5431956c/addons/web/static/lib/bootstrap/js/dropdown.js#L308-L314

A solution would be to update bootstrap:
https://github.com/twbs/bootstrap/blame/688bce4fa695cc360a0d084e34f029b0c192b223/js/src/dropdown.js#L232-L237

The fix can be to listen to mouseup events on such '.dropdown-toggle'
elements while waiting for a bootstrap update.

Part of https://github.com/odoo/odoo/pull/72539
task-2476601

closes odoo/odoo#73032

X-original-commit: 048a329fc514b2c98cf7e6af7279f90fce53eb09
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Younn Olivier
2021-06-30 18:21:24 +00:00
committed by qsm-odoo
parent 8f62471ef6
commit e69633cf2d
@@ -1212,7 +1212,7 @@ var SnippetsMenu = Widget.extend({
// Active snippet editor on click in the page
var lastElement;
this.$document.on('click.snippets_menu', '*', ev => {
const onClick = ev => {
var srcElement = ev.target || (ev.originalEvent && (ev.originalEvent.target || ev.originalEvent.originalTarget)) || ev.srcElement;
if (!srcElement || lastElement === srcElement) {
return;
@@ -1237,7 +1237,11 @@ var SnippetsMenu = Widget.extend({
return;
}
this._activateSnippet($target);
});
};
this.$document.on('click.snippets_menu', '*', onClick);
// Needed as bootstrap stop the propagation of click events for dropdowns
this.$document.on('mouseup.snippets_menu', '.dropdown-toggle', onClick);
core.bus.on('deactivate_snippet', this, this._onDeactivateSnippet);
@@ -1282,7 +1286,7 @@ var SnippetsMenu = Widget.extend({
editor.cover();
}
}, 250);
}, 50)
}, 50);
// We use addEventListener instead of jQuery because we need 'capture'.
// Setting capture to true allows to take advantage of event bubbling
// for events that otherwise don’t support it. (e.g. useful when