From 6f1f506bcb5204485165183c5bfdf70ef85cbb1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=98=E9=9A=8F=E9=A3=8E=E6=9F=93?=
 <83899365+chensuifengran@users.noreply.github.com>
Date: Mon, 23 Sep 2024 11:24:48 +0800
Subject: [PATCH] fix(components): [color-picker] support dynamic change of
 showAlpha prop (#18280)

* feat(components): [color-picker] supports dynamic change of colorFormat

* test(components): [color-picker] test cases with fixes added

* fix(components): [color-picker] support dynamic change of showAlpha prop

---------

Co-authored-by: SKSQ2529720581 <83899365+SKSQ2529720581@users.noreply.github.com>
---
 .../__tests__/color-picker.test.tsx           | 66 +++++++++++++------
 .../color-picker/src/color-picker.vue         | 11 ++--
 2 files changed, 50 insertions(+), 27 deletions(-)

diff --git a/packages/components/color-picker/__tests__/color-picker.test.tsx b/packages/components/color-picker/__tests__/color-picker.test.tsx
index 3464f423f4..e6f5cbcd15 100644
--- a/packages/components/color-picker/__tests__/color-picker.test.tsx
+++ b/packages/components/color-picker/__tests__/color-picker.test.tsx
@@ -433,6 +433,51 @@ describe('Color-picker', () => {
     wrapper.unmount()
   })
 
+  it('should update the colorFormat and selected color when the colorFormat prop changes', async () => {
+    const color = ref('#00FF00')
+    const colorFormat = ref('hex')
+    const wrapper = mount(() => (
+      <ColorPicker v-model={color.value} color-format={colorFormat.value} />
+    ))
+
+    colorFormat.value = 'rgb'
+    await nextTick()
+    const colorPickerWrapper = wrapper.findComponent(ColorPicker)
+    const customInput = colorPickerWrapper.findComponent({
+      ref: 'inputRef',
+    })
+    expect(colorPickerWrapper.vm.color.format).toBe('rgb')
+    expect(color.value).toBe('rgb(0, 255, 0)')
+    expect(
+      customInput.find<HTMLInputElement>('.el-input__inner').element.value
+    ).toBe('rgb(0, 255, 0)')
+    wrapper.unmount()
+  })
+  it('should update the selected color when the showAlpha prop changes', async () => {
+    const color = ref('#00FF00AA')
+    const showAlpha = ref(true)
+    const wrapper = mount(() => (
+      <ColorPicker
+        v-model={color.value}
+        color-format="hex"
+        showAlpha={showAlpha.value}
+      />
+    ))
+
+    showAlpha.value = false
+    await nextTick()
+    const colorPickerWrapper = wrapper.findComponent(ColorPicker)
+    const customInput = colorPickerWrapper.findComponent({
+      ref: 'inputRef',
+    })
+    expect(colorPickerWrapper.vm.color.enableAlpha).toBe(false)
+    expect(color.value).toBe('#00FF00')
+    expect(
+      customInput.find<HTMLInputElement>('.el-input__inner').element.value
+    ).toBe('#00FF00')
+    wrapper.unmount()
+  })
+
   describe('form item accessibility integration', () => {
     it('automatic id attachment', async () => {
       const wrapper = mount(() => (
@@ -498,25 +543,4 @@ describe('Color-picker', () => {
     expect(blurHandler).toHaveBeenCalled()
     wrapper.unmount()
   })
-
-  it('when colorFormat prop changes, the color format and v-model binding values should be updated', async () => {
-    const color = ref('#00FF00')
-    const colorFormat = ref('hex')
-    const wrapper = mount(() => (
-      <ColorPicker v-model={color.value} color-format={colorFormat.value} />
-    ))
-
-    colorFormat.value = 'rgb'
-    await nextTick()
-    const colorPickerWrapper = wrapper.findComponent(ColorPicker)
-    const customInput = colorPickerWrapper.findComponent({
-      ref: 'inputRef',
-    })
-    expect(colorPickerWrapper.vm.color.format).toBe('rgb')
-    expect(color.value).toBe('rgb(0, 255, 0)')
-    expect(
-      customInput.find<HTMLInputElement>('.el-input__inner').element.value
-    ).toBe('rgb(0, 255, 0)')
-    wrapper.unmount()
-  })
 })
diff --git a/packages/components/color-picker/src/color-picker.vue b/packages/components/color-picker/src/color-picker.vue
index e59d356a00..28ee6cd842 100644
--- a/packages/components/color-picker/src/color-picker.vue
+++ b/packages/components/color-picker/src/color-picker.vue
@@ -364,13 +364,12 @@ watch(
 )
 
 watch(
-  () => props.colorFormat,
+  () => [props.colorFormat, props.showAlpha],
   () => {
-    if (props.colorFormat) {
-      color.format = props.colorFormat
-      color.doOnChange()
-      emit(UPDATE_MODEL_EVENT, color.value)
-    }
+    color.enableAlpha = props.showAlpha
+    color.format = props.colorFormat || color.format
+    color.doOnChange()
+    emit(UPDATE_MODEL_EVENT, color.value)
   }
 )