From 8dcfd410914cdab20c3cb6d4c1278d709fd48aa7 Mon Sep 17 00:00:00 2001
From: smohan <smohan@163.com>
Date: Tue, 28 Jun 2022 17:47:10 +0800
Subject: [PATCH] =?UTF-8?q?fix(color-picker):=20fix:=20=E9=A2=9C=E8=89=B2?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8=E6=A0=B7=E5=BC=8F=E5=BC=82=E5=B8=B8?=
 =?UTF-8?q?(#1044)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#1044
---
 src/color-picker/color-picker.tsx | 33 +++++++++++--------------------
 src/color-picker/panel/index.tsx  |  5 +----
 2 files changed, 13 insertions(+), 25 deletions(-)

diff --git a/src/color-picker/color-picker.tsx b/src/color-picker/color-picker.tsx
index 1dfc4ad03..fb328dd57 100644
--- a/src/color-picker/color-picker.tsx
+++ b/src/color-picker/color-picker.tsx
@@ -1,16 +1,8 @@
-import {
-  ComponentPublicInstance,
-  defineComponent,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  toRefs,
-} from '@vue/composition-api';
+import { defineComponent, ref, toRefs } from '@vue/composition-api';
 import useVModel from '../hooks/useVModel';
 import { renderTNodeJSXDefault } from '../utils/render-tnode';
 import props from './props';
 import { Popup as TPopup } from '../popup';
-import { useClickOutsider } from './utils/click-outsider';
 import ColorPanel from './panel';
 import DefaultTrigger from './trigger';
 import { TdColorContext } from './interfaces';
@@ -42,21 +34,10 @@ export default defineComponent({
       props.onPaletteBarChange(context);
     };
 
-    const refTrigger = ref<HTMLElement>();
-    const refColorPanel = ref<ComponentPublicInstance>();
-
-    const { addClickOutsider, removeClickOutsider } = useClickOutsider();
-    onMounted(() => addClickOutsider([refTrigger.value, refColorPanel.value], () => setVisible(false)));
-    onBeforeUnmount(() => {
-      removeClickOutsider();
-    });
-
     return {
       baseClassName,
       innerValue,
       visible,
-      refTrigger,
-      refColorPanel,
       setVisible,
       setInnerValue,
       handleChange,
@@ -97,6 +78,16 @@ export default defineComponent({
       overlayStyle: {
         padding: 0,
       },
+      onVisibleChange: (
+        visible: boolean,
+        context: {
+          trigger: string;
+        },
+      ) => {
+        if (context.trigger === 'document') {
+          this.setVisible(false);
+        }
+      },
     };
     return (
       <t-popup
@@ -107,7 +98,7 @@ export default defineComponent({
         }}
         content={renderPopupContent}
       >
-        <div class={`${baseClassName}__trigger`} onClick={() => setVisible(!this.visible)} ref="refTrigger">
+        <div class={`${baseClassName}__trigger`} onClick={() => setVisible(!this.visible)}>
           {renderTNodeJSXDefault(
             this,
             'default',
diff --git a/src/color-picker/panel/index.tsx b/src/color-picker/panel/index.tsx
index bacaeccfa..7ff93c06e 100644
--- a/src/color-picker/panel/index.tsx
+++ b/src/color-picker/panel/index.tsx
@@ -324,10 +324,7 @@ export default defineComponent({
     };
 
     return (
-      <div
-        class={[`${baseClassName}__panel`, this.disabled ? statusClassNames.disabled : false]}
-        onClick={(e: MouseEvent) => e.stopPropagation()}
-      >
+      <div class={[`${baseClassName}__panel`, this.disabled ? statusClassNames.disabled : false]}>
         <panel-header
           {...{
             props: {