From 515359004ba45596bc12f8a610d25b8264fd4d2c Mon Sep 17 00:00:00 2001
From: momei <78132554+momei-LJM@users.noreply.github.com>
Date: Tue, 24 Dec 2024 22:01:38 +0800
Subject: [PATCH] fix(components): [color-picker] optimize the flickering issue
 (#18872)

* fix(components): [color-picker] Optimize the flickering issue

* fix(components): [color-picker] remove meaningless comments
---
 packages/components/color-picker/src/color-picker.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/components/color-picker/src/color-picker.vue b/packages/components/color-picker/src/color-picker.vue
index 7ee8beb3c5..3ff27004cf 100644
--- a/packages/components/color-picker/src/color-picker.vue
+++ b/packages/components/color-picker/src/color-picker.vue
@@ -16,7 +16,10 @@
     @hide="setShowPicker(false)"
   >
     <template #content>
-      <div v-click-outside="handleClickOutside" @keydown.esc="handleEsc">
+      <div
+        v-click-outside:[triggerRef]="handleClickOutside"
+        @keydown.esc="handleEsc"
+      >
         <div :class="ns.be('dropdown', 'main-wrapper')">
           <hue-slider ref="hue" class="hue-slider" :color="color" vertical />
           <sv-panel ref="sv" :color="color" />
@@ -245,7 +248,6 @@ function setShowPicker(value: boolean) {
 }
 
 const debounceSetShowPicker = debounce(setShowPicker, 100, { leading: true })
-
 function show() {
   if (colorDisabled.value) return
   setShowPicker(true)
@@ -271,6 +273,9 @@ function resetColor() {
 
 function handleTrigger() {
   if (colorDisabled.value) return
+  if (showPicker.value) {
+    resetColor()
+  }
   debounceSetShowPicker(!showPicker.value)
 }