From 01d9fd4dfa751ab2e921e592fe6de7f600ec4381 Mon Sep 17 00:00:00 2001
From: Sami Mazouz <sychocouldy@gmail.com>
Date: Fri, 3 Nov 2023 10:09:05 +0100
Subject: [PATCH] fix: color input changes while typing

---
 .../src/common/components/ColorPreviewInput.tsx  | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/framework/core/js/src/common/components/ColorPreviewInput.tsx b/framework/core/js/src/common/components/ColorPreviewInput.tsx
index 3b643419e9..2d00fc6303 100644
--- a/framework/core/js/src/common/components/ColorPreviewInput.tsx
+++ b/framework/core/js/src/common/components/ColorPreviewInput.tsx
@@ -11,10 +11,18 @@ export default class ColorPreviewInput extends Component {
 
     attrs.type ||= 'text';
 
-    // If the input is a 3 digit hex code, convert it to 6 digits.
-    if (attrs.value.length === 4) {
-      attrs.value = attrs.value.replace(/#([a-f0-9])([a-f0-9])([a-f0-9])/, '#$1$1$2$2$3$3');
-    }
+    attrs.onblur = () => {
+      if (attrs.value.length === 4) {
+        attrs.value = attrs.value.replace(/#([a-f0-9])([a-f0-9])([a-f0-9])/, '#$1$1$2$2$3$3');
+        attrs.onchange?.({ target: { value: attrs.value } });
+      }
+
+      // Validate the color
+      if (!/^#[a-f0-9]{6}$/i.test(attrs.value)) {
+        attrs.value = '#000000';
+        attrs.onchange?.({ target: { value: attrs.value } });
+      }
+    };
 
     return (
       <div className="ColorInput">