[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>

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();
+        }
+    }
 }

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">