From d890ea8b8a06b63f533eb44d12c21220e407113e Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Fri, 8 Mar 2024 11:29:12 +0100
Subject: [PATCH] [IMP] web_editor: prevent the colorpicker from closing on
 inner click

Before this commit, clicking in the area below the "Hex color" input
would close the color picker. This was annoying when entering a value in
the "Hex color" input and then clicking below to confirm it.

After this commit, the color picker no longer closes when clicking on
its background.

task-3747408

Part-of: odoo/odoo#157034
---
 .../static/src/js/wysiwyg/widgets/color_palette.js       | 9 +++++++++
 addons/web_editor/static/src/xml/snippets.xml            | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
index 256ab8590ab..54aecb885d6 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
@@ -1039,4 +1039,13 @@ export class ColorPalette extends Component {
         this._updateGradient();
         this._activateGradientSlider($(this.pickers['custom_gradient'].querySelector('.o_slider_multi input')));
     }
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onColorpickerClick(ev) {
+        if (ev.target.matches(".o_colorpicker_section, .o_colorpicker_sections")) {
+            ev.stopPropagation();
+        }
+    }
 }
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
index e6a08a9e1ac..d4623f8bf8c 100644
--- a/addons/web_editor/static/src/xml/snippets.xml
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -60,7 +60,7 @@
     </t>
 
     <!-- options -->
-    <div t-name="web_editor.ColorPalette" class="colorpicker" t-ref="el">
+    <div t-name="web_editor.ColorPalette" class="colorpicker" t-ref="el" t-on-click="this._onColorpickerClick">
         <div class="o_we_colorpicker_switch_panel d-flex justify-content-end px-2">
             <t t-set="first_button_name"><t t-if="props.withCombinations">Theme</t><t t-else="">Solid</t></t>
             <button type="button" tabindex="1" class="o_we_colorpicker_switch_pane_btn" t-attf-data-target="#{props.withCombinations ? 'color-combinations' : 'theme-colors'}"