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

@@ -57,7 +57,11 @@
         "noAccumulatingSpread": "off"
       },
       "a11y": {
-        "useKeyWithClickEvents": "off"
+        "noAriaHiddenOnFocusable": "off",
+        "noLabelWithoutControl": "off",
+        "useFocusableInteractive": "off",
+        "useKeyWithClickEvents": "off",
+        "useSemanticElements": "off"
       }
     }
   },

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');
+  });
 });

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();
+  const rgba = color.toRgb();
-  hsba.a = alpha || 1;
+
-  return generateColor(hsba);
+  // 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);
 };
 
 /**