From 80110bdf52f78c02fb739ea494bb24667fd3f1ad Mon Sep 17 00:00:00 2001
From: lenhanphung <44486647+lenhanphung@users.noreply.github.com>
Date: Thu, 15 Jan 2026 21:38:46 +0700
Subject: [PATCH] #461 Fix color picker for calendar modify modal (#462)

---
 src/components/Calendar/CalendarColorPicker.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/Calendar/CalendarColorPicker.tsx b/src/components/Calendar/CalendarColorPicker.tsx
index df9521f..2337b22 100644
--- a/src/components/Calendar/CalendarColorPicker.tsx
+++ b/src/components/Calendar/CalendarColorPicker.tsx
@@ -8,7 +8,7 @@ import {
   Typography,
   useTheme,
 } from "@linagora/twake-mui";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { HexColorPicker } from "react-colorful";
 import { useI18n } from "twake-i18n";
 import { defaultColors, getAccessiblePair } from "./utils/calendarColorsUtils";
@@ -27,6 +27,15 @@ export function ColorPicker({
       ? selectedColor
       : undefined
   );
+
+  useEffect(() => {
+    if (!colors.find((c) => c.light === selectedColor?.light)) {
+      setCustomColor(selectedColor);
+    } else {
+      setCustomColor(undefined);
+    }
+  }, [selectedColor, colors]);
+
   return (
     <Box display="flex" alignItems="center" gap={1}>
       {colors.map((c) => (