diff --git a/src/components/Event/EventFormFields.tsx b/src/components/Event/EventFormFields.tsx index 334c66e..a384f87 100644 --- a/src/components/Event/EventFormFields.tsx +++ b/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) }