fix: color picker open popup when disabled (ant-design#44466)

ammar-knowledge · Aug 28, 2023 · 2d1d987 · 2d1d987
1 parent 4d1bac4
commit 2d1d987
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 7 deletions.
diff --git 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
@@ -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();
+  });
 });