From 2d1d98790e5ec438b77645cfd1f49b194d810ae9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BA=A2=E6=9E=9C=E6=B1=81?= <pingfj77@gmail.com>
Date: Mon, 28 Aug 2023 20:16:34 +0800
Subject: [PATCH] fix: color picker open popup when disabled (#44466)

---
 components/color-picker/ColorPicker.tsx       |  7 ++-
 .../color-picker/__tests__/index.test.tsx     | 45 +++++++++++++++++--
 2 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/components/color-picker/ColorPicker.tsx b/components/color-picker/ColorPicker.tsx
index abdc869311..7b9eab1e51 100644
--- a/components/color-picker/ColorPicker.tsx
+++ b/components/color-picker/ColorPicker.tsx
@@ -1,6 +1,5 @@
 import type { CSSProperties, FC } from 'react';
 import React, { useContext, useMemo, useRef, useState } from 'react';
-
 import type {
   HsbaColorType,
   ColorPickerProps as RcColorPickerProps,
@@ -11,16 +10,16 @@ import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import genPurePanel from '../_util/PurePanel';
 import { getStatusClassNames } from '../_util/statusUtils';
 import warning from '../_util/warning';
-import type { SizeType } from '../config-provider/SizeContext';
 import type { ConfigConsumerProps } from '../config-provider/context';
 import { ConfigContext } from '../config-provider/context';
 import useSize from '../config-provider/hooks/useSize';
+import type { SizeType } from '../config-provider/SizeContext';
 import { FormItemInputContext, NoFormStyle } from '../form/context';
 import type { PopoverProps } from '../popover';
 import Popover from '../popover';
 import theme from '../theme';
-import ColorPickerPanel from './ColorPickerPanel';
 import type { Color } from './color';
+import ColorPickerPanel from './ColorPickerPanel';
 import ColorTrigger from './components/ColorTrigger';
 import useColorState from './hooks/useColorState';
 import type {
@@ -229,7 +228,7 @@ const ColorPicker: CompoundedComponent = (props) => {
       style={styles?.popup}
       overlayInnerStyle={styles?.popupOverlayInner}
       onOpenChange={(visible) => {
-        if (popupAllowCloseRef.current) {
+        if (popupAllowCloseRef.current && !disabled) {
           setPopupOpen(visible);
         }
       }}
diff --git a/components/color-picker/__tests__/index.test.tsx b/components/color-picker/__tests__/index.test.tsx
index a005aefb84..4c6763a0d2 100644
--- a/components/color-picker/__tests__/index.test.tsx
+++ b/components/color-picker/__tests__/index.test.tsx
@@ -1,16 +1,18 @@
+import React, { useMemo, useState } from 'react';
 import { createEvent, fireEvent, render } from '@testing-library/react';
 import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
-import React, { useMemo, useState } from 'react';
+
+import { resetWarned } from '../../_util/warning';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { waitFakeTimer } from '../../../tests/utils';
-import { resetWarned } from '../../_util/warning';
+import Button from '../../button';
 import ConfigProvider from '../../config-provider';
 import Form from '../../form';
 import theme from '../../theme';
+import type { Color } from '../color';
 import type { ColorPickerProps } from '../ColorPicker';
 import ColorPicker from '../ColorPicker';
-import type { Color } from '../color';
 
 function doMouseMove(
   container: HTMLElement,
@@ -518,4 +520,41 @@ describe('ColorPicker', () => {
     render(<ColorPicker disabledAlpha value="#1677ff" />);
     expect(errorSpy).not.toHaveBeenCalled();
   });
+
+  it('Should not show popup when disabled', async () => {
+    const Demo = () => {
+      const [disabled, setDisabled] = useState(false);
+      return (
+        <div className="App">
+          <ColorPicker disabled={disabled} />
+          <div className="buttons">
+            <Button
+              className="disabled-btn"
+              disabled={disabled}
+              onClick={() => {
+                setDisabled(true);
+              }}
+            >
+              禁用
+            </Button>
+            <Button
+              className="active-btn"
+              disabled={!disabled}
+              onClick={() => {
+                setDisabled(false);
+              }}
+            >
+              启用
+            </Button>
+          </div>
+        </div>
+      );
+    };
+    const { container } = render(<Demo />);
+    fireEvent.click(container.querySelector('.disabled-btn')!);
+    fireEvent.click(container.querySelector('.ant-color-picker-trigger')!);
+    await waitFakeTimer();
+    fireEvent.click(container.querySelector('.active-btn')!);
+    expect(document.body.querySelector('.ant-popover')).toBeFalsy();
+  });
 });