From 1f753dd2839ed5f4372b0d7dd2452ae32af4e245 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Tue, 22 Aug 2023 11:15:21 -0700
Subject: [PATCH] fix(color-picker): update value when alphaChannel is toggled
 (#7563)

**Related Issue:** #7205

## Summary

This updates the color picker to update its state properly when
`alphaChannel` is toggled.
---
 .../color-picker/color-picker.e2e.ts           | 18 ++++++++++++++++++
 .../components/color-picker/color-picker.tsx   |  9 +++++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts b/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts
index 9bf305b800..fdb1ffa85b 100644
--- a/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts
+++ b/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts
@@ -1855,6 +1855,24 @@ describe("calcite-color-picker", () => {
           });
         });
       });
+
+      it("updates value when alphaChannel is toggled", async () => {
+        const page = await newE2EPage();
+        await page.setContent(
+          `<calcite-color-picker value="${supportedFormatToSampleValue.hex}"></calcite-color-picker>`
+        );
+        const color = await page.find("calcite-color-picker");
+
+        await color.setProperty("alphaChannel", true);
+        await page.waitForChanges();
+
+        expect(await color.getProperty("value")).toEqual(supportedAlphaFormatToSampleValue.hexa);
+
+        await color.setProperty("alphaChannel", false);
+        await page.waitForChanges();
+
+        expect(await color.getProperty("value")).toEqual(supportedFormatToSampleValue.hex);
+      });
     });
   });
 
diff --git a/packages/calcite-components/src/components/color-picker/color-picker.tsx b/packages/calcite-components/src/components/color-picker/color-picker.tsx
index 6bfa5db687..bf776e7543 100644
--- a/packages/calcite-components/src/components/color-picker/color-picker.tsx
+++ b/packages/calcite-components/src/components/color-picker/color-picker.tsx
@@ -146,9 +146,10 @@ export class ColorPicker
    */
   @Prop({ reflect: true }) format: Format = "auto";
 
+  @Watch("alphaChannel")
   @Watch("format")
-  handleFormatChange(format: Format): void {
-    this.setMode(format);
+  handleFormatOrAlphaChannelChange(): void {
+    this.setMode(this.format);
     this.internalColorSet(this.color, false, "internal");
   }
 
@@ -1311,6 +1312,10 @@ export class ColorPicker
   };
 
   private initOpacitySlider = (canvas: HTMLCanvasElement): void => {
+    if (!canvas) {
+      return;
+    }
+
     this.opacitySliderRenderingContext = canvas.getContext("2d");
     this.updateCanvasSize("opacity-slider");
     this.drawOpacitySlider();