From ce1356559d1bbf640f74cff1b2c463b8e524a0cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Fri, 13 Sep 2024 15:41:53 +0800
Subject: [PATCH] fix: ColorPicker hex precision (#50843)

* test: test driven

* fix: format logic

* chore: comment

* chore: rm useless lint rule

* chore: rm useless lint rule

* chore: rm useless lint rule

* chore: rm useless lint rule
---
 biome.json                                       |  6 +++++-
 components/color-picker/__tests__/index.test.tsx | 12 ++++++++++++
 components/color-picker/util.ts                  | 15 ++++++++++++---
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/biome.json b/biome.json
index a69eba8c07..e01856c438 100644
--- a/biome.json
+++ b/biome.json
@@ -57,7 +57,11 @@
         "noAccumulatingSpread": "off"
       },
       "a11y": {
-        "useKeyWithClickEvents": "off"
+        "noAriaHiddenOnFocusable": "off",
+        "noLabelWithoutControl": "off",
+        "useFocusableInteractive": "off",
+        "useKeyWithClickEvents": "off",
+        "useSemanticElements": "off"
       }
     }
   },
diff --git a/components/color-picker/__tests__/index.test.tsx b/components/color-picker/__tests__/index.test.tsx
index 933a929679..a934509722 100644
--- a/components/color-picker/__tests__/index.test.tsx
+++ b/components/color-picker/__tests__/index.test.tsx
@@ -936,4 +936,16 @@ describe('ColorPicker', () => {
       });
     });
   });
+
+  it('input precision', async () => {
+    const onChange = jest.fn();
+    const { container } = render(<ColorPicker open onChange={onChange} />);
+
+    fireEvent.change(container.querySelector('.ant-color-picker-hex-input input')!, {
+      target: { value: '2ddcb4' },
+    });
+
+    const onChangeColor = onChange.mock.calls[0][0];
+    expect(onChangeColor.toHexString()).toBe('#2ddcb4');
+  });
 });
diff --git a/components/color-picker/util.ts b/components/color-picker/util.ts
index d29dc72748..f2107af95b 100644
--- a/components/color-picker/util.ts
+++ b/components/color-picker/util.ts
@@ -19,9 +19,18 @@ export const getColorAlpha = (color: AggregationColor) => getRoundNumber(color.t
 
 /** Return the color whose `alpha` is 1 */
 export const genAlphaColor = (color: AggregationColor, alpha?: number) => {
-  const hsba = color.toHsb();
-  hsba.a = alpha || 1;
-  return generateColor(hsba);
+  const rgba = color.toRgb();
+
+  // Color from hsb input may get `rgb` is (0/0/0) when `hsb.b` is 0
+  // So if rgb is empty, we should get from hsb
+  if (!rgba.r && !rgba.g && !rgba.b) {
+    const hsba = color.toHsb();
+    hsba.a = alpha || 1;
+    return generateColor(hsba);
+  }
+
+  rgba.a = alpha || 1;
+  return generateColor(rgba);
 };
 
 /**