From ed8bb41ca9d5aac7935bbdabf0fa6352befe2436 Mon Sep 17 00:00:00 2001
From: lenhanphung <lenhanphung@gmail.com>
Date: Thu, 16 Oct 2025 16:16:05 +0700
Subject: [PATCH] fix: resolve timezone properly in TimezoneSelector and
 EventModal

- Resolve timezone alias to main timezone in TimezoneSelector before passing to TimezoneAutocomplete
- Resolve timezone in EventModal useState initialization to ensure correct timezone display
- Sync resolved timezone when modal opens or Redux timezone changes
- Ensure timezone is always resolved in resetAllStateToDefault callback
- Fix issue where TimezoneAutocomplete doesn't show correct timezone on first load
---
 src/components/Calendar/TimezoneSelector.tsx     |  7 +++++--
 src/components/Timezone/TimezoneAutocomplete.tsx |  1 -
 src/features/Events/EventModal.tsx               | 13 +++++++++++--
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/Calendar/TimezoneSelector.tsx b/src/components/Calendar/TimezoneSelector.tsx
index 1c3d346..e7580f2 100644
--- a/src/components/Calendar/TimezoneSelector.tsx
+++ b/src/components/Calendar/TimezoneSelector.tsx
@@ -20,7 +20,10 @@ export function TimezoneSelector({ value, onChange }: TimezoneSelectProps) {
     return { zones, browserTz, getTimezoneOffset };
   }, []);
 
-  const selectedOffset = getTimezoneOffset(value);
+  const effectiveTimezone = value
+    ? resolveTimezone(value)
+    : timezoneList.browserTz;
+  const selectedOffset = getTimezoneOffset(effectiveTimezone);
 
   const handleOpen = (event: MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
@@ -68,7 +71,7 @@ export function TimezoneSelector({ value, onChange }: TimezoneSelectProps) {
         }}
       >
         <TimezoneAutocomplete
-          value={value}
+          value={effectiveTimezone}
           onChange={onChange}
           zones={timezoneList.zones}
           getTimezoneOffset={getTimezoneOffset}
diff --git a/src/components/Timezone/TimezoneAutocomplete.tsx b/src/components/Timezone/TimezoneAutocomplete.tsx
index e9f817a..35a5151 100644
--- a/src/components/Timezone/TimezoneAutocomplete.tsx
+++ b/src/components/Timezone/TimezoneAutocomplete.tsx
@@ -105,4 +105,3 @@ export function TimezoneAutocomplete({
     />
   );
 }
-
diff --git a/src/features/Events/EventModal.tsx b/src/features/Events/EventModal.tsx
index 5b5b973..c1ddb0c 100644
--- a/src/features/Events/EventModal.tsx
+++ b/src/features/Events/EventModal.tsx
@@ -186,7 +186,9 @@ function EventPopover({
   const [eventClass, setEventClass] = useState(event?.class ?? "PUBLIC");
   const [busy, setBusy] = useState(event?.transp ?? "OPAQUE");
   const [timezone, setTimezone] = useState(
-    event?.timezone ? resolveTimezone(event.timezone) : calendarTimezone
+    event?.timezone
+      ? resolveTimezone(event.timezone)
+      : resolveTimezone(calendarTimezone)
   );
   const [hasVideoConference, setHasVideoConference] = useState(
     event?.x_openpass_videoconference ? true : false
@@ -204,6 +206,13 @@ function EventPopover({
     userPersonnalCalendarsRef.current = userPersonnalCalendars;
   }, [userPersonnalCalendars]);
 
+  // Sync timezone with Redux when modal opens or timezone changes
+  useEffect(() => {
+    if (open && !event?.timezone && calendarTimezone) {
+      setTimezone(resolveTimezone(calendarTimezone));
+    }
+  }, [open, calendarTimezone, event?.timezone]);
+
   const resetAllStateToDefault = useCallback(() => {
     setShowMore(false);
     setShowDescription(false);
@@ -220,7 +229,7 @@ function EventPopover({
     setAlarm("");
     setEventClass("PUBLIC");
     setBusy("OPAQUE");
-    setTimezone(calendarTimezone);
+    setTimezone(resolveTimezone(calendarTimezone));
     setHasVideoConference(false);
     setMeetingLink(null);
   }, [calendarTimezone]);