From db0b4013263a032be39a5df1be5d6605843a0b53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matou=C5=A1=20Dzivjak?= <matousdzivjak@gmail.com>
Date: Sat, 12 Oct 2024 13:51:24 +0200
Subject: [PATCH] fix: bubble events

---
 .../components/ColorInput/ColorInput.module.css |  2 +-
 .../components/ColorInput/ColorInput.tsx        | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/circuit-ui/components/ColorInput/ColorInput.module.css b/packages/circuit-ui/components/ColorInput/ColorInput.module.css
index da96e7a513..385826e27f 100644
--- a/packages/circuit-ui/components/ColorInput/ColorInput.module.css
+++ b/packages/circuit-ui/components/ColorInput/ColorInput.module.css
@@ -86,4 +86,4 @@
 
 .input::placeholder {
   font-family: var(--cui-font-stack-mono);
-}
\ No newline at end of file
+}
diff --git a/packages/circuit-ui/components/ColorInput/ColorInput.tsx b/packages/circuit-ui/components/ColorInput/ColorInput.tsx
index 4f768bf06d..15f1cfbc4f 100644
--- a/packages/circuit-ui/components/ColorInput/ColorInput.tsx
+++ b/packages/circuit-ui/components/ColorInput/ColorInput.tsx
@@ -118,10 +118,23 @@ export const ColorInput = forwardRef<InputElement, ColorInputProps>(
         return;
       }
 
-      colorPickerRef.current.value = pastedText.startsWith('#')
+      const pastedColor = pastedText.startsWith('#')
         ? pastedText
         : `#${pastedText}`;
-      colorInputRef.current.value = pastedText.replace('#', '');
+
+      colorPickerRef.current.value = pastedColor;
+
+      // React overwrites the input.value setter. In order to be able to trigger
+      // a 'change' event on the input, we need to use the native setter.
+      // Adapted from https://stackoverflow.com/a/46012210/4620154
+      Object.getOwnPropertyDescriptor(
+        HTMLInputElement.prototype,
+        'value',
+      )?.set?.call(colorInputRef.current, pastedColor.replace('#', ''));
+
+      colorInputRef.current.dispatchEvent(
+        new Event('change', { bubbles: true }),
+      );
       colorPickerRef.current.dispatchEvent(
         new Event('change', { bubbles: true }),
       );