From 0afe8baf1e74f28fb9c7d71aab66ffbe773910ec Mon Sep 17 00:00:00 2001
From: linxianxi <47104575+linxianxi@users.noreply.github.com>
Date: Wed, 7 Jun 2023 10:25:59 +0800
Subject: [PATCH] fix(ColorPicker): should not trigger onChange when click
 clear after clearing (#42643)

---
 components/color-picker/ColorPickerPanel.tsx      |  2 ++
 components/color-picker/__tests__/index.test.tsx  | 10 ++++++++++
 components/color-picker/components/ColorClear.tsx |  6 +++---
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/components/color-picker/ColorPickerPanel.tsx b/components/color-picker/ColorPickerPanel.tsx
index e403ac0df1..2b8f7663e9 100644
--- a/components/color-picker/ColorPickerPanel.tsx
+++ b/components/color-picker/ColorPickerPanel.tsx
@@ -24,6 +24,7 @@ const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
     onClear,
     onChangeComplete,
     color,
+    colorCleared,
     ...injectProps
   } = props;
   const colorPickerPanelPrefixCls = `${prefixCls}-inner-panel`;
@@ -34,6 +35,7 @@ const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
         <ColorClear
           prefixCls={prefixCls}
           value={color}
+          colorCleared={colorCleared}
           onChange={(clearColor) => {
             onChange?.(clearColor);
             onClear?.();
diff --git a/components/color-picker/__tests__/index.test.tsx b/components/color-picker/__tests__/index.test.tsx
index 24fd42a791..f22a441921 100644
--- a/components/color-picker/__tests__/index.test.tsx
+++ b/components/color-picker/__tests__/index.test.tsx
@@ -277,6 +277,16 @@ describe('ColorPicker', () => {
     ).toEqual('background: rgb(99, 22, 22);');
   });
 
+  it('Should not trigger onChange when click clear after clearing', async () => {
+    const onChange = jest.fn();
+    const { container } = render(<ColorPicker allowClear onChange={onChange} />);
+    fireEvent.click(container.querySelector('.ant-color-picker-trigger')!);
+    fireEvent.click(container.querySelector('.ant-color-picker-clear')!);
+    expect(onChange).toHaveBeenCalledTimes(1);
+    fireEvent.click(container.querySelector('.ant-popover .ant-color-picker-clear')!);
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
   it('Should fix hover boundary issues', async () => {
     spyElementPrototypes(HTMLElement, {
       getBoundingClientRect: () => ({
diff --git a/components/color-picker/components/ColorClear.tsx b/components/color-picker/components/ColorClear.tsx
index d8f44f4f36..6299751a9d 100644
--- a/components/color-picker/components/ColorClear.tsx
+++ b/components/color-picker/components/ColorClear.tsx
@@ -4,14 +4,14 @@ import type { Color } from '../color';
 import type { ColorPickerBaseProps } from '../interface';
 import { generateColor } from '../util';
 
-interface ColorClearProps extends Pick<ColorPickerBaseProps, 'prefixCls'> {
+interface ColorClearProps extends Pick<ColorPickerBaseProps, 'prefixCls' | 'colorCleared'> {
   value?: Color;
   onChange?: (value: Color) => void;
 }
 
-const ColorClear: FC<ColorClearProps> = ({ prefixCls, value, onChange }) => {
+const ColorClear: FC<ColorClearProps> = ({ prefixCls, value, colorCleared, onChange }) => {
   const handleClick = () => {
-    if (value) {
+    if (value && !colorCleared) {
       const hsba = value.toHsb();
       hsba.a = 0;
       const genColor = generateColor(hsba);