fix(color-picker): fix can not select color (#896)

packages/color-picker/src/index.vue

@@ -1,5 +1,4 @@
 <template>
-  <div v-click-outside="hide" style="display: inline-block;">
   <el-popper
     ref="popper"
     v-model:visible="showPicker"
@@ -14,6 +13,7 @@
     :stop-popper-mouse-event="false"
   >
     <template #default>
+      <div v-click-outside="hide">
         <div class="el-color-dropdown__main-wrapper">
           <hue-slider
             ref="hue"
@@ -57,6 +57,7 @@
             {{ t('el.colorpicker.confirm') }}
           </el-button>
         </div>
+      </div>
     </template>
     <template #trigger>
       <div
@@ -82,7 +83,6 @@
       </div>
     </template>
   </el-popper>
-  </div>
 </template>
 
 <script lang="ts">
@@ -106,6 +106,7 @@ import { UPDATE_MODEL_EVENT }  from '@element-plus/utils/constants'
 import { useGlobalConfig } from '@element-plus/utils/util'
 import { isValidComponentSize } from '@element-plus/utils/validators'
 import { elFormKey, elFormItemKey } from '@element-plus/form'
+import debounce from 'lodash/debounce'
 
 import type { PropType } from 'vue'
 import type { ElFormContext, ElFormItemContext } from '@element-plus/form'
@@ -216,8 +217,14 @@ export default defineComponent( {
         ? `rgba(${ r }, ${ g }, ${ b }, ${ color.get('alpha') / 100 })`
         : `rgb(${ r }, ${ g }, ${ b })`
     }
+    function setShowPicker(value) {
+      showPicker.value = value
+    }
+
+    const debounceSetShowPicker = debounce(setShowPicker, 100)
+
     function hide() {
-      showPicker.value = false
+      debounceSetShowPicker(false)
       resetColor()
     }
     function resetColor() {
@@ -231,7 +238,7 @@ export default defineComponent( {
     }
     function handleTrigger() {
       if (colorDisabled.value) return
-      showPicker.value = !showPicker.value
+      debounceSetShowPicker(!showPicker.value)
     }
     function handleConfirm() {
       color.fromString(customInput.value)
@@ -241,10 +248,10 @@ export default defineComponent( {
       emit(UPDATE_MODEL_EVENT, value)
       emit('change', value)
       elFormItem.formItemMitt?.emit('el.form.change', value)
-      showPicker.value = false
+      debounceSetShowPicker(false)
     }
     function clear() {
-      showPicker.value = false
+      debounceSetShowPicker(false)
       emit(UPDATE_MODEL_EVENT, null)
       emit('change', null)
       if (props.modelValue !== null) {