fix: clearedColor should be changed when initial value is undefined (#…

…48584)
ant-design · Apr 23, 2024 · ce176a8 · ce176a8
1 parent 09cb3f4
commit ce176a8
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git a/components/color-picker/__tests__/index.test.tsx b/components/color-picker/__tests__/index.test.tsx
@@ -700,21 +700,37 @@ describe('ColorPicker', () => {
   });
 
   describe('default clearValue should be changed', () => {
-    const Demo = () => {
-      const [color, setColor] = useState<string>('');
+    const Demo = ({ defaultValue }: { defaultValue?: string }) => {
+      const [color, setColor] = useState<string | undefined>(defaultValue);
       useEffect(() => {
         setColor('#1677ff');
       }, []);
       return <ColorPicker value={color} allowClear />;
     };
 
     it('normal', () => {
-      const { container } = render(<Demo />);
+      const { container } = render(<Demo defaultValue="" />);
 
       expect(container.querySelector('.ant-color-picker-clear')).toBeFalsy();
     });
 
     it('strict', () => {
+      const { container } = render(
+        <React.StrictMode>
+          <Demo defaultValue="" />
+        </React.StrictMode>,
+      );
+
+      expect(container.querySelector('.ant-color-picker-clear')).toBeFalsy();
+    });
+
+    it('default undefined, normal', () => {
+      const { container } = render(<Demo />);
+
+      expect(container.querySelector('.ant-color-picker-clear')).toBeFalsy();
+    });
+
+    it('default undefined, strict', () => {
       const { container } = render(
         <React.StrictMode>
           <Demo />

diff --git a/components/color-picker/hooks/useColorState.ts b/components/color-picker/hooks/useColorState.ts
@@ -43,13 +43,11 @@ const useColorState = (
       return;
     }
     prevValue.current = value;
-    if (hasValue(value)) {
-      const newColor = generateColor(value || '');
-      if (prevColor.current.cleared === true) {
-        newColor.cleared = 'controlled';
-      }
-      setColorValue(newColor);
+    const newColor = generateColor(hasValue(value) ? value || '' : prevColor.current);
+    if (prevColor.current.cleared === true) {
+      newColor.cleared = 'controlled';
     }
+    setColorValue(newColor);
   }, [value]);
 
   return [colorValue, setColorValue, prevColor] as const;