[#571] calendar selector doesnt need to be clicked twice to open (#605)

Co-authored-by: Camille Moussu <cmoussu@linagora.com>

src/components/Event/EventFormFields.tsx

@@ -188,6 +188,10 @@ export default function EventFormFields({
   // Track if user has clicked on calendar section in normal mode
   const [hasClickedCalendarSection, setHasClickedCalendarSection] =
     React.useState(false);
+
+  // Track whether the calendar Select dropdown is open
+  const [calendarSelectOpen, setCalendarSelectOpen] = React.useState(false);
+
   const delegatedCalendars = userPersonalCalendars.filter(
     (cal) => cal.delegated
   );
@@ -202,13 +206,14 @@ export default function EventFormFields({
     : "";
   const isSelectedDelegated = !!selectedCalendar?.delegated;
 
-  // Reset hasEndDateChanged and hasClickedDateTimeSection when modal closes
+  // Reset all click-tracking state when modal closes
   React.useEffect(() => {
     if (!isOpen) {
       setHasEndDateChanged(false);
       setHasClickedDateTimeSection(false);
       setHasClickedLocationSection(false);
       setHasClickedCalendarSection(false);
+      setCalendarSelectOpen(false);
     }
   }, [isOpen]);
 
@@ -230,6 +235,13 @@ export default function EventFormFields({
     }
   }, [showMore, hasEndDateChanged, startDate, endDate]);
 
+  // Auto-open the calendar Select once it is mounted after clicking the preview row
+  React.useEffect(() => {
+    if (hasClickedCalendarSection) {
+      setCalendarSelectOpen(true);
+    }
+  }, [hasClickedCalendarSection]);
+
   // Use all-day toggle hook
   const { handleAllDayToggle } = useAllDayToggle({
     allday,
@@ -822,6 +834,9 @@ export default function EventFormFields({
               label=""
               SelectDisplayProps={{ "aria-label": t("event.form.calendar") }}
               displayEmpty
+              open={calendarSelectOpen}
+              onOpen={() => setCalendarSelectOpen(true)}
+              onClose={() => setCalendarSelectOpen(false)}
               onChange={(e: SelectChangeEvent) =>
                 handleCalendarChange(e.target.value)
               }