From fb63a42a17a54fa8970d520a04618044294de795 Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Fri, 8 Mar 2024 11:30:32 +0100
Subject: [PATCH] [IMP] web: update the colorpicker on hex color input's input
 event

This commit improves the UX of the color picker's hex input in two ways:

- If the user enters a hex color without the "#" symbol, it's
automatically added.
- As soon as a valid hexadecimal color is entered in the input, the
colorpicker updates, and the color is applied to the target element.

task-3747408

closes odoo/odoo#157034

Signed-off-by: Arthur Detroux (ard) <ard@odoo.com>
---
 .../static/src/core/colorpicker/colorpicker.js | 18 ++++++++++++++++--
 .../src/core/colorpicker/colorpicker.xml       |  3 ++-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/addons/web/static/src/core/colorpicker/colorpicker.js b/addons/web/static/src/core/colorpicker/colorpicker.js
index d387d3b13df..a6bb93647d2 100644
--- a/addons/web/static/src/core/colorpicker/colorpicker.js
+++ b/addons/web/static/src/core/colorpicker/colorpicker.js
@@ -502,8 +502,8 @@ export class Colorpicker extends Component {
     _onChangeInputs(ev) {
         switch ($(ev.target).data("colorMethod")) {
             case "hex":
-                this._updateHex(this.$el.find(".o_hex_input").val());
-                break;
+                // Handled by the "input" event (see "_onHexColorInput").
+                return;
             case "rgb":
                 this._updateRgba(
                     parseInt(this.$el.find(".o_red_input").val()),
@@ -525,4 +525,18 @@ export class Colorpicker extends Component {
         this._updateUI();
         this._colorSelected();
     }
+    /**
+     * Called when the hex color input's input event is triggered.
+     *
+     * @private
+     * @param {Event} ev
+     */
+    _onHexColorInput(ev) {
+        const hexColorValue = ev.target.value.replaceAll("#", "");
+        if (hexColorValue.length === 6) {
+            this._updateHex(`#${hexColorValue}`);
+            this._updateUI();
+            this._colorSelected();
+        }
+    }
 }
diff --git a/addons/web/static/src/core/colorpicker/colorpicker.xml b/addons/web/static/src/core/colorpicker/colorpicker.xml
index d69d3561c6c..6e71c7369db 100644
--- a/addons/web/static/src/core/colorpicker/colorpicker.xml
+++ b/addons/web/static/src/core/colorpicker/colorpicker.xml
@@ -19,7 +19,8 @@
             <t t-set="input_classes" t-value="'p-0 border-0 text-center font-monospace bg-transparent'" />
 
             <div class="o_hex_div px-1 d-flex align-items-baseline">
-                <input type="text" t-attf-class="o_hex_input {{input_classes}}" data-color-method="hex" size="1"/>
+                <input type="text" t-attf-class="o_hex_input {{input_classes}}" data-color-method="hex" size="1"
+                    t-on-input="_onHexColorInput"/>
                 <label class="flex-grow-0 ms-1 mb-0">hex</label>
             </div>
             <div class="o_rgba_div px-1 d-flex align-items-baseline">