fix(components): [color-picker] can't select predefine value (#8205)

packages/components/color-picker/src/index.vue

@@ -67,7 +67,7 @@
         :aria-label="buttonAriaLabel"
         :aria-labelledby="buttonAriaLabelledby"
         :aria-description="
-          t('el.colorpicker.description', { color: modelValue })
+          t('el.colorpicker.description', { color: modelValue || '' })
         "
         :tabindex="tabindex"
         @keydown.enter="handleTrigger"
@@ -193,9 +193,9 @@ export default defineComponent({
       }
     )
 
-    const hue = ref(null)
-    const svPanel = ref(null)
-    const alpha = ref(null)
+    const hue = ref<InstanceType<typeof HueSlider>>()
+    const svPanel = ref<InstanceType<typeof SvPanel>>()
+    const alpha = ref<InstanceType<typeof AlphaSlider>>()
     const popper = ref(null)
     // active-change is used to prevent modelValue changes from triggering.
     let shouldActiveChange = true
@@ -203,10 +203,11 @@ export default defineComponent({
     const color = reactive(
       new Color({
         enableAlpha: props.showAlpha,
-        format: props.colorFormat,
+        format: props.colorFormat || '',
         value: props.modelValue,
       })
     )
+    type ColorType = typeof color
     const showPicker = ref(false)
     const showPanelColor = ref(false)
     const customInput = ref('')
@@ -264,7 +265,7 @@ export default defineComponent({
     )
 
     // methods
-    function displayedRgb(color, showAlpha) {
+    function displayedRgb(color: ColorType, showAlpha: boolean) {
       if (!(color instanceof Color)) {
         throw new TypeError('color should be instance of _color Class')
       }
@@ -275,7 +276,7 @@ export default defineComponent({
         : `rgb(${r}, ${g}, ${b})`
     }
 
-    function setShowPicker(value) {
+    function setShowPicker(value: boolean) {
       showPicker.value = value
     }
 
@@ -291,7 +292,10 @@ export default defineComponent({
         if (props.modelValue) {
           color.fromString(props.modelValue)
         } else {
-          showPanelColor.value = false
+          color.value = ''
+          nextTick(() => {
+            showPanelColor.value = false
+          })
         }
       })
     }
@@ -315,7 +319,7 @@ export default defineComponent({
       nextTick(() => {
         const newColor = new Color({
           enableAlpha: props.showAlpha,
-          format: props.colorFormat,
+          format: props.colorFormat || '',
           value: props.modelValue,
         })
         if (!color.compare(newColor)) {