From 6b264fab91ead2cffe269d5054a577f096c5523a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Geelen=20=28sge=29?= <sge@odoo.com>
Date: Tue, 12 Oct 2021 09:34:59 +0000
Subject: [PATCH] [FIX] web_editor: use color css name fix reset color
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`_updateEditorUI` was reseting color to old or non css color value.
due to a race condition in the editor selection.

task-2654666

closes odoo/odoo#78499

X-original-commit: fd3791d79377b270ab98d646710ecc1d2f364810
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Signed-off-by: Sébastien Geelen <sebgeelen@users.noreply.github.com>
---
 .../static/src/js/wysiwyg/wysiwyg.js          | 20 ++++++++++---------
 .../static/tests/field_html_tests.js          |  2 +-
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
index b5212e94081..387f2f2bfa9 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
@@ -437,7 +437,7 @@ const Wysiwyg = Widget.extend({
                     }
                 }
             },
-        }
+        };
         return editorCollaborationOptions;
     },
     /**
@@ -707,7 +707,7 @@ const Wysiwyg = Widget.extend({
      * Set cursor to the editor latest position before blur or to the last editable node, ready to type.
      */
     focus: function () {
-        if(!this.odooEditor.historyResetLatestComputedSelection()) {
+        if (!this.odooEditor.historyResetLatestComputedSelection()) {
             // If the editor don't have an history step to focus to,
             // We place the cursor after the end of the editor exiting content.
             const range = document.createRange();
@@ -1345,14 +1345,16 @@ const Wysiwyg = Widget.extend({
             }, 400);
         }
         // Update color of already opened colorpickers.
-        for (let eventName in this.colorpickers) {
-            const selectedColor = this._getSelectedColor($, eventName);
-            if (selectedColor) {
-                // If the palette was already opened (e.g. modifying a gradient), the new DOM state
-                // must be reflected in the palette, but the tab selection must not be impacted.
-                this.colorpickers[eventName].setSelectedColor(null, selectedColor, false);
+        setTimeout(() => {
+            for (let eventName in this.colorpickers) {
+                const selectedColor = this._getSelectedColor($, eventName);
+                if (selectedColor) {
+                    // If the palette was already opened (e.g. modifying a gradient), the new DOM state
+                    // must be reflected in the palette, but the tab selection must not be impacted.
+                    this.colorpickers[eventName].setSelectedColor(null, selectedColor, false);
+                }
             }
-        }
+        }, 0);
     },
     _updateMediaJustifyButton: function (commandState) {
         if (!this.lastMediaClicked) {
diff --git a/addons/web_editor/static/tests/field_html_tests.js b/addons/web_editor/static/tests/field_html_tests.js
index 0fe39069baa..18f3cd32ea5 100644
--- a/addons/web_editor/static/tests/field_html_tests.js
+++ b/addons/web_editor/static/tests/field_html_tests.js
@@ -263,7 +263,7 @@ QUnit.module('web_editor', {}, function () {
                 return openingProm;
             }
 
-
+            await new Promise((resolve)=>setTimeout(resolve, 50));
             await openColorpicker('#toolbar .note-back-color-preview');
             assert.ok($('.note-back-color-preview').hasClass('show'),
                 "should display the color picker");