From 4ca96504f0e52c3462ccccb724e2923d17533771 Mon Sep 17 00:00:00 2001
From: Red Ochsenbein <red.ochsenbein@frontify.com>
Date: Wed, 15 Jan 2025 12:59:47 +0100
Subject: [PATCH 1/3] fix(ColorPicker): allow empty alpha field

---
 .../src/components/ColorPicker/ColorValueInput.tsx        | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/ColorPicker/ColorValueInput.tsx b/packages/components/src/components/ColorPicker/ColorValueInput.tsx
index 5ab48c6297..4134892742 100644
--- a/packages/components/src/components/ColorPicker/ColorValueInput.tsx
+++ b/packages/components/src/components/ColorPicker/ColorValueInput.tsx
@@ -156,12 +156,16 @@ export const ColorValueInput = (
                 <TextInput.Root
                     data-test-id="color-picker-value-input-alpha"
                     className={styles.valueInput}
-                    value={currentColor.alpha === undefined ? 100 : Math.trunc(currentColor.alpha * 100)}
+                    value={currentColor.alpha === undefined ? '' : Math.trunc(currentColor.alpha * 100)}
                     type="number"
+                    onBlur={() => currentColor.alpha === undefined && onColorChange({ ...currentColor, alpha: 1 })}
                     onChange={(event) => {
                         onColorChange({
                             ...currentColor,
-                            alpha: getLimitedColorChannelValue(event.target.value, 0, 100) / 100,
+                            alpha:
+                                event.target.value === ''
+                                    ? undefined
+                                    : getLimitedColorChannelValue(event.target.value, 0, 100) / 100,
                         });
                     }}
                     aria-label="Color Opacity"

From b8a6ce0fb7b0a7955835421d61d9ea4b9b07e4c6 Mon Sep 17 00:00:00 2001
From: Red Ochsenbein <red.ochsenbein@frontify.com>
Date: Wed, 15 Jan 2025 13:04:23 +0100
Subject: [PATCH 2/3] chore: add changeset

---
 .changeset/big-taxis-raise.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/big-taxis-raise.md

diff --git a/.changeset/big-taxis-raise.md b/.changeset/big-taxis-raise.md
new file mode 100644
index 0000000000..d6e1e6006e
--- /dev/null
+++ b/.changeset/big-taxis-raise.md
@@ -0,0 +1,5 @@
+---
+"@frontify/fondue-components": patch
+---
+
+fix(ColorPicker): allow empty alpha field

From 3b4ce221469e8e849c1453810918d6c6c37e2f9c Mon Sep 17 00:00:00 2001
From: Red Ochsenbein <red.ochsenbein@frontify.com>
Date: Wed, 15 Jan 2025 14:03:20 +0100
Subject: [PATCH 3/3] fix: revert change and add workaround for React behaviour

See this issue:
https://github.com/facebook/react/issues/9402
---
 .../src/components/ColorPicker/ColorValueInput.tsx       | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/components/ColorPicker/ColorValueInput.tsx b/packages/components/src/components/ColorPicker/ColorValueInput.tsx
index 4134892742..6b1d6f7ea3 100644
--- a/packages/components/src/components/ColorPicker/ColorValueInput.tsx
+++ b/packages/components/src/components/ColorPicker/ColorValueInput.tsx
@@ -156,16 +156,13 @@ export const ColorValueInput = (
                 <TextInput.Root
                     data-test-id="color-picker-value-input-alpha"
                     className={styles.valueInput}
-                    value={currentColor.alpha === undefined ? '' : Math.trunc(currentColor.alpha * 100)}
+                    /* .toString() is a workaround for https://github.com/facebook/react/issues/9402 */
+                    value={currentColor.alpha === undefined ? 100 : Math.trunc(currentColor.alpha * 100).toString()}
                     type="number"
-                    onBlur={() => currentColor.alpha === undefined && onColorChange({ ...currentColor, alpha: 1 })}
                     onChange={(event) => {
                         onColorChange({
                             ...currentColor,
-                            alpha:
-                                event.target.value === ''
-                                    ? undefined
-                                    : getLimitedColorChannelValue(event.target.value, 0, 100) / 100,
+                            alpha: getLimitedColorChannelValue(event.target.value, 0, 100) / 100,
                         });
                     }}
                     aria-label="Color Opacity"