From 07f8b6161af3f7424e8cf4243ab113098466a544 Mon Sep 17 00:00:00 2001
From: IanM <16573496+imorland@users.noreply.github.com>
Date: Mon, 12 Dec 2022 10:14:59 +0000
Subject: [PATCH] fix: support 3digit hex color input (#3706)

---
 .../core/js/src/common/components/ColorPreviewInput.tsx      | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/framework/core/js/src/common/components/ColorPreviewInput.tsx b/framework/core/js/src/common/components/ColorPreviewInput.tsx
index a33944244..bd6f8598f 100644
--- a/framework/core/js/src/common/components/ColorPreviewInput.tsx
+++ b/framework/core/js/src/common/components/ColorPreviewInput.tsx
@@ -10,6 +10,11 @@ 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');
+    }
+
     return (
       <div className="ColorInput">
         <input className={classList('FormControl', className)} id={id} {...attrs} />