fix: onComplete directly case (#50501)

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

@@ -34,12 +34,15 @@ function doMouseMove(
   });
 
   fireEvent(ele, mouseDown);
-  // Drag
-  const mouseMove: any = new Event('mousemove');
-  mouseMove.pageX = end;
-  mouseMove.pageY = end;
 
-  fireEvent(document, mouseMove);
+  // Drag
+  if (start !== end) {
+    const mouseMove: any = new Event('mousemove');
+    mouseMove.pageX = end;
+    mouseMove.pageY = end;
+
+    fireEvent(document, mouseMove);
+  }
 
   const mouseUp = createEvent.mouseUp(document);
   fireEvent(document, mouseUp);
@@ -848,4 +851,32 @@ describe('ColorPicker', () => {
       );
     });
   });
+
+  it('onChangeComplete with default empty color should not be alpha', async () => {
+    const spyRect = spyElementPrototypes(HTMLElement, {
+      getBoundingClientRect: () => ({
+        x: 0,
+        y: 100,
+        width: 100,
+        height: 100,
+      }),
+    });
+
+    const handleChangeComplete = jest.fn();
+    const { container } = render(<ColorPicker open onChangeComplete={handleChangeComplete} />);
+
+    // Move
+    doMouseMove(container, 50, 50);
+    expect(handleChangeComplete).toHaveBeenCalledTimes(1);
+
+    const color = handleChangeComplete.mock.calls[0][0];
+    expect(color.toRgb()).toEqual({
+      r: 255,
+      g: 128,
+      b: 128,
+      a: 1,
+    });
+
+    spyRect.mockRestore();
+  });
 });

components/color-picker/components/PanelPicker/index.tsx

@@ -17,6 +17,11 @@ const components = {
   slider: ColorSlider,
 };
 
+type Info = {
+  type?: 'hue' | 'alpha';
+  value?: number;
+};
+
 const PanelPicker: FC = () => {
   const panelPickerContext = useContext(PanelPickerContext);
 
@@ -81,32 +86,10 @@ const PanelPicker: FC = () => {
   }, [value, activeIndex, isSingle, lockedColor, gradientDragging]);
 
   // ============================ Change ============================
-  const fillColor = (nextColor: AggregationColor) => {
-    if (mode === 'single') {
-      return nextColor;
-    }
-
-    const nextColors = [...colors];
-    nextColors[activeIndex] = {
-      ...nextColors[activeIndex],
-      color: nextColor,
-    };
-
-    return new AggregationColor(nextColors);
-  };
-
-  const onInternalChange = (
-    colorValue: AggregationColor | Color,
-    fromPicker?: boolean,
-    info?: {
-      type?: 'hue' | 'alpha';
-      value?: number;
-    },
-  ) => {
-    const nextColor = generateColor(colorValue);
-
-    let submitColor = nextColor;
+  const fillColor = (nextColor: AggregationColor | Color, info?: Info) => {
+    let submitColor = generateColor(nextColor);
 
+    // Fill alpha color to 100% if origin is cleared color
     if (value.cleared) {
       const rgb = submitColor.toRgb();
 
@@ -125,11 +108,29 @@ const PanelPicker: FC = () => {
       }
     }
 
-    onChange(fillColor(submitColor), fromPicker);
+    if (mode === 'single') {
+      return submitColor;
+    }
+
+    const nextColors = [...colors];
+    nextColors[activeIndex] = {
+      ...nextColors[activeIndex],
+      color: submitColor,
+    };
+
+    return new AggregationColor(nextColors);
   };
 
-  const onInternalChangeComplete = (nextColor: AggregationColor) => {
-    onChangeComplete(fillColor(nextColor));
+  const onInternalChange = (
+    colorValue: AggregationColor | Color,
+    fromPicker?: boolean,
+    info?: Info,
+  ) => {
+    onChange(fillColor(colorValue, info), fromPicker);
+  };
+
+  const onInternalChangeComplete = (nextColor: Color, info?: Info) => {
+    onChangeComplete(fillColor(nextColor, info));
   };
 
   // ============================ Render ============================
@@ -170,8 +171,8 @@ const PanelPicker: FC = () => {
         onChange={(colorValue, info) => {
           onInternalChange(colorValue, true, info);
         }}
-        onChangeComplete={(colorValue) => {
-          onInternalChangeComplete(generateColor(colorValue));
+        onChangeComplete={(colorValue, info) => {
+          onInternalChangeComplete(colorValue, info);
         }}
         components={components}
       />