Refine full-day date range defaults

Author: felixgollnhuber

src/components/create-event-form.test.tsx

@@ -285,17 +285,18 @@ describe("CreateEventForm", () => {
     global.fetch = fetchMock as typeof fetch;
 
     renderCreateEventForm();
-    vi.useRealTimers();
-    const user = userEvent.setup();
 
-    await user.type(screen.getByLabelText("Event title"), "Offsite days");
-    await user.click(screen.getByRole("radio", { name: /Full days/i }));
+    fireEvent.change(screen.getByLabelText("Event title"), {
+      target: { value: "Offsite days" },
+    });
+    fireEvent.click(screen.getByRole("radio", { name: /Full days/i }));
 
     expect(screen.queryByRole("combobox", { name: "Daily start" })).not.toBeInTheDocument();
     expect(screen.queryByRole("combobox", { name: "Slot size" })).not.toBeInTheDocument();
     expect(screen.getAllByText("Apr 2, 2026 - May 2, 2026").length).toBeGreaterThan(0);
 
-    await user.click(screen.getByRole("button", { name: "Create event" }));
+    vi.useRealTimers();
+    fireEvent.click(screen.getByRole("button", { name: "Create event" }));
 
     await waitFor(() => {
       expect(fetchMock).toHaveBeenCalledTimes(1);
@@ -312,6 +313,19 @@ describe("CreateEventForm", () => {
     expect(payload.dates[payload.dates.length - 1]).toBe("2026-05-01");
   });
 
+  it("uses the current day when switching a still-default range to full-day after midnight", async () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-04-02T10:00:00.000Z"));
+
+    renderCreateEventForm();
+
+    vi.setSystemTime(new Date("2026-04-03T00:30:00.000Z"));
+
+    fireEvent.click(screen.getByRole("radio", { name: /Full days/i }));
+
+    expect(screen.getAllByText("Apr 3, 2026 - May 3, 2026").length).toBeGreaterThan(0);
+  });
+
   it("submits the optional notification email when alerts are available", async () => {
     const user = userEvent.setup();
     const fetchMock = vi.fn().mockResolvedValue({

src/components/create-event-form.tsx

@@ -36,6 +36,7 @@ import {
 import { meetingDurationOptions, slotMinuteOptions } from "@/lib/constants";
 import { useI18n } from "@/lib/i18n/context";
 import { buildTimezoneOptions } from "@/lib/timezone-options";
+import type { EventType } from "@/lib/types";
 import { cn } from "@/lib/utils";
 import { createEventCreateSchema } from "@/lib/validators";
 
@@ -63,7 +64,6 @@ const eventFieldOrder = [
 
 type EventField = (typeof eventFieldOrder)[number];
 type EventFormErrors = Partial<Record<EventField, string>>;
-type EventType = "time_grid" | "full_day";
 
 const eventFieldIds: Record<EventField, string> = {
   eventType: "event-type",
@@ -109,17 +109,6 @@ function getDefaultDateRange(eventType: EventType, today: Date): DateRange {
   };
 }
 
-function dateRangeMatchesByDay(left: DateRange | undefined, right: DateRange) {
-  if (!left?.from || !left?.to || !right.from || !right.to) {
-    return false;
-  }
-
-  return (
-    format(left.from, "yyyy-MM-dd") === format(right.from, "yyyy-MM-dd") &&
-    format(left.to, "yyyy-MM-dd") === format(right.to, "yyyy-MM-dd")
-  );
-}
-
 function sortWeekdays(values: number[]) {
   return [...values].sort(
     (left, right) =>
@@ -198,16 +187,13 @@ export function CreateEventForm({
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [fieldErrors, setFieldErrors] = useState<EventFormErrors>({});
   const [isRangePickerOpen, setIsRangePickerOpen] = useState(false);
-  const [defaultDateRangeStart] = useState(() => startOfToday());
+  const [initialDateRange] = useState(() => getDefaultDateRange("time_grid", startOfToday()));
   const [eventType, setEventType] = useState<EventType>("time_grid");
   const [title, setTitle] = useState("");
   const [notificationEmail, setNotificationEmail] = useState("");
-  const [dateRange, setDateRange] = useState<DateRange | undefined>(() =>
-    getDefaultDateRange("time_grid", defaultDateRangeStart),
-  );
-  const [draftDateRange, setDraftDateRange] = useState<DateRange | undefined>(() =>
-    getDefaultDateRange("time_grid", defaultDateRangeStart),
-  );
+  const [dateRange, setDateRange] = useState<DateRange | undefined>(initialDateRange);
+  const [draftDateRange, setDraftDateRange] = useState<DateRange | undefined>(initialDateRange);
+  const [usesDefaultDateRange, setUsesDefaultDateRange] = useState(true);
   const [timezone, setTimezone] = useState(() => {
     const browserTimezone =
       typeof window !== "undefined"
@@ -329,6 +315,7 @@ export function CreateEventForm({
     }
 
     setDateRange(draftDateRange);
+    setUsesDefaultDateRange(false);
     clearErrors("dates");
     setIsRangePickerOpen(false);
   }
@@ -345,9 +332,8 @@ export function CreateEventForm({
   }
 
   function selectEventType(nextEventType: EventType) {
-    const currentDefaultRange = getDefaultDateRange(eventType, defaultDateRangeStart);
-    if (dateRangeMatchesByDay(dateRange, currentDefaultRange)) {
-      const nextDefaultRange = getDefaultDateRange(nextEventType, defaultDateRangeStart);
+    if (usesDefaultDateRange) {
+      const nextDefaultRange = getDefaultDateRange(nextEventType, startOfToday());
       setDateRange(nextDefaultRange);
       setDraftDateRange(nextDefaultRange);
       clearErrors("dates", "weekdays");