feat(ColorPicker): close panel when click clear button (#42406)

* feat: close panel when click clear button

* feat: optimize code

* feat: optimize code

* feat: optimize code

components/color-picker/ColorPicker.tsx

@@ -6,7 +6,7 @@ import type {
 import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import type { CSSProperties } from 'react';
-import React, { useContext, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import genPurePanel from '../_util/PurePanel';
 import type { ConfigConsumerProps } from '../config-provider/context';
 import { ConfigContext } from '../config-provider/context';
@@ -89,7 +89,7 @@ const ColorPicker: CompoundedComponent = (props) => {
     postState: (openData) => !disabled && openData,
     onChange: onOpenChange,
   });
-  const [clearColor, setClearColor] = useState(false);
+  const [colorCleared, setColorCleared] = useState(false);
 
   const prefixCls = getPrefixCls('color-picker', customizePrefixCls);
 
@@ -101,8 +101,8 @@ const ColorPicker: CompoundedComponent = (props) => {
 
   const handleChange = (data: Color) => {
     const color: Color = generateColor(data);
-    if (clearColor && color.toHsb().a > 0) {
-      setClearColor(false);
+    if (colorCleared && color.toHsb().a > 0) {
+      setColorCleared(false);
     }
     if (!value) {
       setColorValue(color);
@@ -111,7 +111,7 @@ const ColorPicker: CompoundedComponent = (props) => {
   };
 
   const handleClear = (clear: boolean) => {
-    setClearColor(clear);
+    setColorCleared(clear);
   };
 
   const popoverProps: PopoverProps = {
@@ -128,13 +128,19 @@ const ColorPicker: CompoundedComponent = (props) => {
     prefixCls,
     color: colorValue,
     allowClear,
-    clearColor,
+    colorCleared,
     disabled,
     presets,
     format,
     onFormatChange,
   };
 
+  useEffect(() => {
+    if (colorCleared) {
+      setPopupOpen(false);
+    }
+  }, [colorCleared]);
+
   return wrapSSR(
     <Popover
       style={styles?.popup}
@@ -152,8 +158,8 @@ const ColorPicker: CompoundedComponent = (props) => {
           style={style}
           color={colorValue}
           prefixCls={prefixCls}
-          clearColor={clearColor}
           disabled={disabled}
+          colorCleared={colorCleared}
         />
       )}
     </Popover>,

components/color-picker/__tests__/index.test.tsx

@@ -83,8 +83,11 @@ describe('ColorPicker', () => {
     const { container } = render(<ColorPicker allowClear />);
     fireEvent.click(container.querySelector('.ant-color-picker-trigger')!);
     await waitFakeTimer();
+    expect(container.querySelector('.ant-popover-hidden')).toBeFalsy();
     expect(container.querySelector('.ant-color-picker-clear')).toBeTruthy();
     fireEvent.click(container.querySelector('.ant-color-picker-clear')!);
+    await waitFakeTimer();
+    expect(container.querySelector('.ant-popover-hidden')).toBeTruthy();
     expect(
       container.querySelector('.ant-color-picker-alpha-input input')?.getAttribute('value'),
     ).toEqual('0%');

components/color-picker/components/ColorTrigger.tsx

@@ -6,7 +6,7 @@ import type { ColorPickerBaseProps } from '../interface';
 import ColorClear from './ColorClear';
 
 interface colorTriggerProps
-  extends Pick<ColorPickerBaseProps, 'prefixCls' | 'clearColor' | 'disabled'> {
+  extends Pick<ColorPickerBaseProps, 'prefixCls' | 'colorCleared' | 'disabled'> {
   color: Exclude<ColorPickerBaseProps['color'], undefined>;
   open?: boolean;
   className?: string;
@@ -17,17 +17,17 @@ interface colorTriggerProps
 }
 
 const ColorTrigger = forwardRef<HTMLDivElement, colorTriggerProps>((props, ref) => {
-  const { color, prefixCls, open, clearColor, disabled, className, ...rest } = props;
+  const { color, prefixCls, open, colorCleared, disabled, className, ...rest } = props;
   const colorTriggerPrefixCls = `${prefixCls}-trigger`;
 
   const containerNode = useMemo<React.ReactNode>(
     () =>
-      clearColor ? (
+      colorCleared ? (
         <ColorClear prefixCls={prefixCls} />
       ) : (
         <ColorBlock prefixCls={prefixCls} color={color.toRgbString()} />
       ),
-    [color, clearColor, prefixCls],
+    [color, colorCleared, prefixCls],
   );
 
   return (

components/color-picker/interface.ts

@@ -18,7 +18,7 @@ export interface ColorPickerBaseProps {
   prefixCls: string;
   format?: keyof typeof ColorFormat;
   allowClear?: boolean;
-  clearColor?: boolean;
+  colorCleared?: boolean;
   disabled?: boolean;
   presets?: PresetsItem[];
   onFormatChange?: ColorPickerProps['onFormatChange'];