Repository: SwitchbackTech/compass (ts)

Issue:
Multiple date pickers are rendering


---
## Prerequisites

- [x] Using an up-to-date main branch

## Expected Behavior

Given that one date picker is open
and the user clicks the input to the other date picker
the first date picker is closed
and the second is opened

## Current Behavior

https://github.com/user-attachments/assets/9a0b195c-bd17-4ed1-bb21-f352a3c8a273


## Steps to Reproduce

<!-- Add relevant code and/or a live example -->
<!-- Add stack traces -->

1. Click all-day row to open a new form

2. Click start date input to open date picker

3. Click end date input to open date picker

4. Notice: both date pickers appear

## Possible Solution (Not obligatory)

When one datepicker is open, close the other
<!--- Suggest a reason for the bug or how to fix it. -->

## Context

This likely occurred as part of #174 

<!--- How has this issue affected users? What are they trying to accomplish? -->


Pull request description:
🐛 Fix: prevent multiple datepickers from rendering simultaneously
This pull request includes several changes aimed at improving the DatePicker component and its integration within the EventForm in order to fix #187. The most important changes include the addition of a new `DatePickers` component, updates to the `DateTimeSection` and `EventForm` components, and the addition of a new test for the EventForm.

### Component Enhancements:

* [`packages/web/src/components/DatePicker/DatePicker.tsx`](diffhunk://#diff-d6415b53742385129e9066bbe9a85ef066defaedd348b3c8548ca8adff802bc1R78-R79): Added `role="combobox"` and `aria-label="datepicker"` to enhance accessibility.
* [`packages/web/src/views/Forms/EventForm/DateTimeSection/DatePickers.tsx`](diffhunk://#diff-a41798c57a8fb058ea61f8be96695eefc3ee3eca85dc0a16d64ff7cb518901f3R1-R199): Introduced a new `DatePickers` component to manage the start and end date pickers.
* [`packages/web/src/views/Forms/EventForm/DateTimeSection/DateTimeSection.tsx`](diffhunk://#diff-a1766d4da85e3b6b334ac5dca6b7cc928b5a189f7d4679ca6e89bba5544cf517L4-R30): Refactored to use the new `DatePickers` component, simplifying the code and removing redundant date handling logic. [[1]](diffhunk://#diff-a1766d4da85e3b6b334ac5dca6b7cc928b5a189f7d4679ca6e89bba5544cf517L4-R30) [[2]](diffhunk://#diff-a1766d4da85e3b6b334ac5dca6b7cc928b5a189f7d4679ca6e89bba5544cf517L67-R65) [[3]](diffhunk://#diff-a1766d4da85e3b6b334ac5dca6b7cc928b5a189f7d4679ca6e89bba5544cf517L123-R96) [[4]](diffhunk://#diff-a1766d4da85e3b6b334ac5dca6b7cc928b5a189f7d4679ca6e89bba5544cf517L213-R109) [[5]](diffhunk://#diff-a1766d4da85e3b6b334ac5dca6b7cc928b5a189f7d4679ca6e89bba5544cf517L226-L231) [[6]](diffhunk://#diff-a1766d4da85e3b6b334ac5dca6b7cc928b5a189f7d4679ca6e89bba5544cf517L242-R132) [[7]](diffhunk://#diff-a1766d4da85e3b6b334ac5dca6b7cc928b5a189f7d4679ca6e89bba5544cf517L255-L304)

### Test Enhancements:

* [`packages/web/src/views/Forms/EventForm/EventForm.test.tsx`](diffhunk://#diff-a07defe44e2a329ef8b5e18f099f50accc7443b8c0afd09e6152b22cf62a549eR1-R64): Added a new test to verify that the start date picker opens and closes correctly when interacting with the end date input.

### Mock Enhancements:

* [`packages/web/src/__tests__/__mocks__/tabbable.js`](diffhunk://#diff-45af0b16d32f4fb2a71845a233df44a4e0f619604687b2bce95c0e19ee717b27R1-R34): Added a mock for the `tabbable` library to handle focus-trap related issues during testing.

### Import Adjustments:

* [`packages/web/src/__tests__/__mocks__/mock.render.tsx`](diffhunk://#diff-60d7b639aff214d93fe1cd78c9e1c5d9076092e770a085a1d11de965bd7c5517R14): Added `GlobalStyle` to the custom render function to ensure global styles are applied during tests. [[1]](diffhunk://#diff-60d7b639aff214d93fe1cd78c9e1c5d9076092e770a085a1d11de965bd7c5517R14) [[2]](diffhunk://#diff-60d7b639aff214d93fe1cd78c9e1c5d9076092e770a085a1d11de965bd7c5517R36)
* [`packages/web/src/views/Forms/EventForm/EventForm.tsx`](diffhunk://#diff-23ffcd9cdd122ecf0865850f3bb1f4f51713a1dacdc28cf0705b5582ba386aa1L28-R28): Updated imports to reflect the new `DatePickers` component path. [[1]](diffhunk://#diff-23ffcd9cdd122ecf0865850f3bb1f4f51713a1dacdc28cf0705b5582ba386aa1L28-R28) [[2]](diffhunk://#diff-23ffcd9cdd122ecf0865850f3bb1f4f51713a1dacdc28cf0705b5582ba386aa1R48-R75)

Patch:
diff --git a/packages/web/src/components/DatePicker/DatePicker.tsx b/packages/web/src/components/DatePicker/DatePicker.tsx
index 427d653d..4d7d243f 100644
--- a/packages/web/src/components/DatePicker/DatePicker.tsx
+++ b/packages/web/src/components/DatePicker/DatePicker.tsx
@@ -75,6 +75,8 @@ export const DatePicker: React.FC<Props> = ({
           {...containerProps}
           bgColor={bgColor}
           selectedColor={theme.color.text.accent}
+          role="combobox"
+          aria-label="datepicker"
           view={view}
         />
       )}
diff --git a/packages/web/src/views/Forms/EventForm/DateTimeSection/DatePickers.tsx b/packages/web/src/views/Forms/EventForm/DateTimeSection/DatePickers.tsx
new file mode 100644
index 00000000..82a783c7
--- /dev/null
+++ b/packages/web/src/views/Forms/EventForm/DateTimeSection/DatePickers.tsx
@@ -0,0 +1,199 @@
+import React, { FC } from "react";
+import dayjs from "dayjs";
+import { Key } from "ts-key-enum";
+import { darken } from "@core/util/color.utils";
+import { MONTH_DAY_YEAR } from "@core/constants/date.constants";
+import { DatePicker } from "@web/components/DatePicker";
+import { AlignItems } from "@web/components/Flex/styled";
+import {
+  dateIsValid,
+  shouldAdjustComplimentDate,
+} from "@web/common/utils/web.date.util";
+
+import { StyledDateFlex } from "./styled";
+
+const stopPropagation = (e: React.MouseEvent<HTMLDivElement>) => {
+  e.stopPropagation();
+};
+
+interface Props {
+  bgColor: string;
+  inputColor?: string;
+  isEndDatePickerOpen: boolean;
+  isStartDatePickerOpen: boolean;
+  selectedEndDate: Date;
+  selectedStartDate: Date;
+  setSelectedEndDate: (value: Date) => void;
+  setSelectedStartDate: (value: Date) => void;
+  setIsStartDatePickerOpen: (arg0: boolean) => void;
+  setIsEndDatePickerOpen: (arg0: boolean) => void;
+}
+
+export const DatePickers: FC<Props> = ({
+  bgColor,
+  inputColor,
+  isEndDatePickerOpen,
+  isStartDatePickerOpen,
+  selectedEndDate,
+  selectedStartDate,
+  setIsEndDatePickerOpen,
+  setIsStartDatePickerOpen,
+  setSelectedEndDate,
+  setSelectedStartDate,
+}) => {
+  const adjustComplimentDateIfNeeded = (
+    changed: "start" | "end",
+    value: Date
+  ) => {
+    const start = changed === "start" ? value : selectedStartDate;
+    const end = changed === "end" ? value : selectedEndDate;
+
+    const { shouldAdjust, compliment } = shouldAdjustComplimentDate(changed, {
+      start,
+      end,
+    });
+
+    if (shouldAdjust) {
+      if (changed === "start") {
+        setSelectedEndDate(compliment);
+        return;
+      }
+
+      if (changed === "end") {
+        setSelectedStartDate(compliment);
+      }
+    }
+  };
+  const closeEndDatePicker = () => {
+    setIsEndDatePickerOpen(false);
+  };
+
+  const closeStartDatePicker = () => {
+    setIsStartDatePickerOpen(false);
+  };
+  const getDateFromInput = (val: string) => {
+    const date = dayjs(val, MONTH_DAY_YEAR).toDate();
+    return date;
+  };
+  const onPickerKeyDown = (
+    picker: "start" | "end",
+    e: React.KeyboardEvent<HTMLDivElement>
+  ) => {
+    switch (e.key) {
+      case Key.Backspace: {
+        e.stopPropagation();
+        break;
+      }
+      case Key.Enter: {
+        e.stopPropagation();
+        const input = e.target as HTMLInputElement;
+        const val = input.value;
+        const isInvalid = val !== undefined && !dateIsValid(val);
+
+        if (isInvalid) {
+          alert(`Sorry, IDK what to do with a ${picker} date of '${val}'
+          Make sure it's in '${MONTH_DAY_YEAR}' and try again`);
+          return;
+        }
+
+        const date = getDateFromInput(val);
+
+        if (picker === "start") {
+          onSelectStartDate(date);
+        }
+
+        if (picker === "end") {
+          onSelectEndDate(date);
+        }
+
+        break;
+      }
+      case Key.Escape: {
+        if (isStartDatePickerOpen) {
+          e.stopPropagation();
+          closeStartDatePicker();
+        }
+        if (isEndDatePickerOpen) {
+          e.stopPropagation();
+          closeEndDatePicker();
+        }
+        break;
+      }
+      case Key.Tab: {
+        if (isStartDatePickerOpen) {
+          setIsStartDatePickerOpen(false);
+        }
+        if (isEndDatePickerOpen) {
+          setIsEndDatePickerOpen(false);
+        }
+        break;
+      }
+      default: {
+        return;
+      }
+    }
+  };
+  const onSelectStartDate = (start: Date) => {
+    setSelectedStartDate(start);
+    setIsStartDatePickerOpen(false);
+    adjustComplimentDateIfNeeded("start", start);
+  };
+
+  const onSelectEndDate = (end: Date) => {
+    setSelectedEndDate(end);
+    setIsEndDatePickerOpen(false);
+    adjustComplimentDateIfNeeded("end", end);
+  };
+
+  return (
+    <>
+      <StyledDateFlex alignItems={AlignItems.CENTER}>
+        <div onMouseUp={stopPropagation} onMouseDown={stopPropagation}>
+          <DatePicker
+            bgColor={darken(bgColor, 15)}
+            calendarClassName="startDatePicker"
+            inputColor={inputColor}
+            isOpen={isStartDatePickerOpen}
+            onCalendarClose={closeStartDatePicker}
+            onCalendarOpen={() => {
+              setIsStartDatePickerOpen(true);
+            }}
+            onChange={() => null}
+            onInputClick={() => {
+              isEndDatePickerOpen && setIsEndDatePickerOpen(false);
+              setIsStartDatePickerOpen(true);
+            }}
+            onKeyDown={(e) => onPickerKeyDown("start", e)}
+            onSelect={onSelectStartDate}
+            selected={selectedStartDate}
+            title="Pick Start Date"
+            view="grid"
+          />
+        </div>
+      </StyledDateFlex>
+
+      <StyledDateFlex alignItems={AlignItems.CENTER}>
+        <div onMouseUp={stopPropagation} onMouseDown={stopPropagation}>
+          <DatePicker
+            bgColor={darken(bgColor, 15)}
+            calendarClassName="endDatePicker"
+            inputColor={inputColor}
+            isOpen={isEndDatePickerOpen}
+            onCalendarClose={closeEndDatePicker}
+            onCalendarOpen={() => setIsEndDatePickerOpen(true)}
+            onChange={() => null}
+            onInputClick={() => {
+              isStartDatePickerOpen && setIsStartDatePickerOpen(false);
+              setIsEndDatePickerOpen(true);
+            }}
+            onKeyDown={(e) => onPickerKeyDown("end", e)}
+            onSelect={onSelectEndDate}
+            selected={selectedEndDate}
+            title="Pick End Date"
+            view="grid"
+          />
+        </div>
+      </StyledDateFlex>
+    </>
+  );
+};
diff --git a/packages/web/src/views/Forms/EventForm/DateTimeSection/DateTimeSection.tsx b/packages/web/src/views/Forms/EventForm/DateTimeSection/DateTimeSection.tsx
index 20da3888..b21f1356 100644
--- a/packages/web/src/views/Forms/EventForm/DateTimeSection/DateTimeSection.tsx
+++ b/packages/web/src/views/Forms/EventForm/DateTimeSection/DateTimeSection.tsx
@@ -1,25 +1,20 @@
 import React, { FC, SetStateAction } from "react";
 import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";
-import { Key } from "ts-key-enum";
 import { Categories_Event, Schema_Event } from "@core/types/event.types";
-import { MONTH_DAY_YEAR } from "@core/constants/date.constants";
 import { SelectOption } from "@web/common/types/component.types";
 import { AlignItems } from "@web/components/Flex/styled";
 import { TimePicker } from "@web/components/TimePicker";
-import { DatePicker } from "@web/components/DatePicker";
 import {
-  dateIsValid,
   getTimeOptionByValue,
   getTimeOptions,
   mapToBackend,
-  shouldAdjustComplimentDate,
   shouldAdjustComplimentTime,
 } from "@web/common/utils/web.date.util";
 import { Option_Time } from "@web/common/types/util.types";
-import { darken } from "@core/util/color.utils";
 
-import { StyledDateFlex, StyledDateTimeFlex, StyledTimeFlex } from "./styled";
+import { DatePickers } from "./DatePickers";
+import { StyledDateTimeFlex, StyledTimeFlex } from "./styled";
 
 dayjs.extend(customParseFormat);
 
@@ -27,12 +22,12 @@ export interface Props {
   bgColor: string;
   category: Categories_Event;
   event: Schema_Event;
-  endTime?: SelectOption<string>;
+  endTime: SelectOption<string>;
   inputColor?: string;
   isEndDatePickerOpen: boolean;
   isStartDatePickerOpen: boolean;
-  selectedEndDate?: Date;
-  selectedStartDate?: Date;
+  selectedEndDate: Date;
+  selectedStartDate: Date;
   setEndTime: (value: SelectOption<string>) => void;
   setIsEndDatePickerOpen: (arg0: boolean) => void;
   setIsStartDatePickerOpen: (arg0: boolean) => void;
@@ -64,34 +59,10 @@ export const DateTimeSection: FC<Props> = ({
 }) => {
   const timeOptions = getTimeOptions();
 
-  const adjustComplimentDateIfNeeded = (
-    changed: "start" | "end",
-    value: Date
-  ) => {
-    const start = changed === "start" ? value : selectedStartDate;
-    const end = changed === "end" ? value : selectedEndDate;
-
-    const { shouldAdjust, compliment } = shouldAdjustComplimentDate(changed, {
-      start,
-      end,
-    });
-
-    if (shouldAdjust) {
-      if (changed === "start") {
-        setSelectedEndDate(compliment);
-        return;
-      }
-
-      if (changed === "end") {
-        setSelectedStartDate(compliment);
-      }
-    }
-  };
-
   const adjustComplimentTimeIfNeeded = (
     changed: "start" | "end",
     value: string
-  ): Option_Time | undefined => {
+  ): Option_Time => {
     const start = changed === "start" ? value : startTime.value;
     const end = changed === "end" ? value : endTime.value;
 
@@ -120,84 +91,9 @@ export const DateTimeSection: FC<Props> = ({
         return correctedStart;
       }
     }
-  };
-
-  const getDateFromInput = (val: string) => {
-    const date = dayjs(val, MONTH_DAY_YEAR).toDate();
-    return date;
-  };
 
-  const closeEndDatePicker = () => {
-    setIsEndDatePickerOpen(false);
-  };
-
-  const closeStartDatePicker = () => {
-    setIsStartDatePickerOpen(false);
-  };
-
-  const onPickerKeyDown = (
-    picker: "start" | "end",
-    e: React.KeyboardEvent<HTMLDivElement>
-  ) => {
-    switch (e.key) {
-      case Key.Backspace: {
-        e.stopPropagation();
-        break;
-      }
-      case Key.Enter: {
-        e.stopPropagation();
-        const input = e.target as HTMLInputElement;
-        const val = input.value;
-        const isInvalid = val !== undefined && !dateIsValid(val);
-
-        if (isInvalid) {
-          alert(`Sorry, IDK what to do with a ${picker} date of '${val}'
-          Make sure it's in '${MONTH_DAY_YEAR}' and try again`);
-          return;
-        }
-
-        const date = getDateFromInput(val);
-
-        if (picker === "start") {
-          onSelectStartDate(date);
-        }
-
-        if (picker === "end") {
-          onSelectEndDate(date);
-        }
-
-        break;
-      }
-      case Key.Escape: {
-        if (isStartDatePickerOpen) {
-          e.stopPropagation();
-          closeStartDatePicker();
-        }
-        if (isEndDatePickerOpen) {
-          e.stopPropagation();
-          closeEndDatePicker();
-        }
-        break;
-      }
-      case Key.Tab: {
-        if (isStartDatePickerOpen) {
-          setIsStartDatePickerOpen(false);
-        }
-        if (isEndDatePickerOpen) {
-          setIsEndDatePickerOpen(false);
-        }
-        break;
-      }
-      default: {
-        return;
-      }
-    }
-  };
-
-  const onSelectEndDate = (end: Date) => {
-    setSelectedEndDate(end);
-    setIsEndDatePickerOpen(false);
-    adjustComplimentDateIfNeeded("end", end);
+    const defaultOption = changed === "start" ? startTime : endTime;
+    return defaultOption;
   };
 
   const onSelectEndTime = (option: SelectOption<string>) => {
@@ -210,7 +106,7 @@ export const DateTimeSection: FC<Props> = ({
         endDate: selectedEndDate,
         startTime: correctedStart ? correctedStart : startTime,
         endTime: option,
-        isAllDay: event.isAllDay,
+        isAllDay: false,
       });
 
       const _event = {
@@ -223,12 +119,6 @@ export const DateTimeSection: FC<Props> = ({
     }
   };
 
-  const onSelectStartDate = (start: Date) => {
-    setSelectedStartDate(start);
-    setIsStartDatePickerOpen(false);
-    adjustComplimentDateIfNeeded("start", start);
-  };
-
   const onSelectStartTime = (option: SelectOption<string>) => {
     setStartTime(option);
     const correctedEnd = adjustComplimentTimeIfNeeded("start", option.value);
@@ -239,7 +129,7 @@ export const DateTimeSection: FC<Props> = ({
         endDate: selectedEndDate,
         startTime: option,
         endTime: correctedEnd ? correctedEnd : endTime,
-        isAllDay: event.isAllDay,
+        isAllDay: false,
       });
 
       const _event = {
@@ -252,56 +142,21 @@ export const DateTimeSection: FC<Props> = ({
     }
   };
 
-  const stopPropagation = (e: React.MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation();
-  };
-
   return (
     <StyledDateTimeFlex alignItems={AlignItems.CENTER} role="tablist">
       {category === Categories_Event.ALLDAY && (
-        <>
-          <StyledDateFlex alignItems={AlignItems.CENTER}>
-            <div onMouseUp={stopPropagation} onMouseDown={stopPropagation}>
-              <DatePicker
-                bgColor={darken(bgColor, 15)}
-                calendarClassName="startDatePicker"
-                inputColor={inputColor}
-                isOpen={isStartDatePickerOpen}
-                onCalendarClose={closeStartDatePicker}
-                onCalendarOpen={() => {
-                  setIsStartDatePickerOpen(true);
-                }}
-                onChange={() => null}
-                onInputClick={() => setIsStartDatePickerOpen(true)}
-                onKeyDown={(e) => onPickerKeyDown("start", e)}
-                onSelect={onSelectStartDate}
-                selected={selectedStartDate}
-                title="Pick Start Date"
-                view="picker"
-              />
-            </div>
-          </StyledDateFlex>
-
-          <StyledDateFlex alignItems={AlignItems.CENTER}>
-            <div onMouseUp={stopPropagation} onMouseDown={stopPropagation}>
-              <DatePicker
-                bgColor={darken(bgColor, 15)}
-                calendarClassName="endDatePicker"
-                inputColor={inputColor}
-                isOpen={isEndDatePickerOpen}
-                onCalendarClose={closeEndDatePicker}
-                onCalendarOpen={() => setIsEndDatePickerOpen(true)}
-                onChange={() => null}
-                onInputClick={() => setIsEndDatePickerOpen(true)}
-                onKeyDown={(e) => onPickerKeyDown("end", e)}
-                onSelect={onSelectEndDate}
-                selected={selectedEndDate}
-                title="Pick End Date"
-                view="picker"
-              />
-            </div>
-          </StyledDateFlex>
-        </>
+        <DatePickers
+          bgColor={bgColor}
+          inputColor={inputColor}
+          isEndDatePickerOpen={isEndDatePickerOpen}
+          isStartDatePickerOpen={isStartDatePickerOpen}
+          selectedEndDate={selectedEndDate}
+          selectedStartDate={selectedStartDate}
+          setSelectedEndDate={setSelectedEndDate}
+          setSelectedStartDate={setSelectedStartDate}
+          setIsEndDatePickerOpen={setIsEndDatePickerOpen}
+          setIsStartDatePickerOpen={setIsStartDatePickerOpen}
+        />
       )}
 
       {category === Categories_Event.TIMED && (
diff --git a/packages/web/src/views/Forms/EventForm/DateTimeSection/index.ts b/packages/web/src/views/Forms/EventForm/DateTimeSection/index.ts
deleted file mode 100644
index 5ef6c9d2..00000000
--- a/packages/web/src/views/Forms/EventForm/DateTimeSection/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { DateTimeSection } from "./DateTimeSection";
-
-export { DateTimeSection };
diff --git a/packages/web/src/views/Forms/EventForm/EventForm.tsx b/packages/web/src/views/Forms/EventForm/EventForm.tsx
index 0a738be0..8fa7aea3 100644
--- a/packages/web/src/views/Forms/EventForm/EventForm.tsx
+++ b/packages/web/src/views/Forms/EventForm/EventForm.tsx
@@ -25,7 +25,7 @@ import {
 } from "@web/common/styles/theme.util";
 
 import { FormProps, SetEventFormField } from "./types";
-import { DateTimeSection } from "./DateTimeSection";
+import { DateTimeSection } from "./DateTimeSection/DateTimeSection";
 import { PrioritySection } from "./PrioritySection";
 import { SaveSection } from "./SaveSection";
 import {
@@ -45,29 +45,34 @@ export const EventForm: React.FC<FormProps> = ({
   ...props
 }) => {
   const { priority, title } = event || {};
+  const priorityColor = colorByPriority[priority || Priorities.UNASSIGNED];
   const category = getCategory(event);
   const isDraft = !event._id;
 
   /********
    * State
    ********/
-  const [endTime, setEndTime] = useState<SelectOption<string> | undefined>();
+  const [endTime, setEndTime] = useState<SelectOption<string>>({
+    label: "1 AM",
+    value: "01:00 AM",
+  });
   const [isShiftKeyPressed, setIsShiftKeyPressed] = useState(false);
   const [isFormOpen, setIsFormOpen] = useState(false);
   const [isEndDatePickerOpen, setIsEndDatePickerOpen] = useState(false);
   const [isStartDatePickerOpen, setIsStartDatePickerOpen] = useState(false);
-  const [startTime, setStartTime] = useState<SelectOption<string>>();
-  const [selectedEndDate, setSelectedEndDate] = useState<Date | undefined>();
-  const [selectedStartDate, setSelectedStartDate] = useState<
-    Date | undefined
-  >();
+  const [startTime, setStartTime] = useState<SelectOption<string>>({
+    label: "12 AM",
+    value: "12:00 AM",
+  });
+  const [selectedEndDate, setSelectedEndDate] = useState(new Date());
+  const [selectedStartDate, setSelectedStartDate] = useState(new Date());
 
   /********
    * Effect
    *********/
 
   const keyDownHandler = useCallback(
-    (e: KeyboardEvent) => {
+    (e: globalThis.KeyboardEvent) => {
       if (e.key === Key.Shift) {
         setIsShiftKeyPressed(true);
       }
@@ -80,7 +85,7 @@ export const EventForm: React.FC<FormProps> = ({
     [_onClose]
   );
 
-  const keyUpHandler = useCallback((e: KeyboardEvent) => {
+  const keyUpHandler = useCallback((e: globalThis.KeyboardEvent) => {
     if (e.key === Key.Shift) {
       setIsShiftKeyPressed(false);
     }
@@ -156,7 +161,7 @@ export const EventForm: React.FC<FormProps> = ({
   };
 
   const onDeleteForm = () => {
-    onDelete(event._id);
+    onDelete?.(event._id);
     onClose();
   };
 
@@ -172,7 +177,7 @@ export const EventForm: React.FC<FormProps> = ({
       startTime,
       endDate: selectedEndDate,
       endTime,
-      isAllDay: event.isAllDay,
+      isAllDay: event.isAllDay || false,
     };
 
     const { startDate, endDate } = mapToBackend(selectedDateTimes);
@@ -279,21 +284,21 @@ export const EventForm: React.FC<FormProps> = ({
           placeholder="Title"
           role="textarea"
           name="Event Title"
-          underlineColor={colorByPriority[priority]}
+          underlineColor={priorityColor}
           value={title}
         />
 
         <PrioritySection
           onSetEventField={onSetEventField}
-          priority={priority}
+          priority={priority || Priorities.UNASSIGNED}
         />
 
         <DateTimeSection
-          bgColor={colorByPriority[priority]}
+          bgColor={priorityColor}
           event={event}
           category={category}
           endTime={endTime}
-          inputColor={hoverColorByPriority[priority]}
+          inputColor={hoverColorByPriority[priority || Priorities.UNASSIGNED]}
           isEndDatePickerOpen={isEndDatePickerOpen}
           isStartDatePickerOpen={isStartDatePickerOpen}
           selectedEndDate={selectedEndDate}
@@ -309,14 +314,17 @@ export const EventForm: React.FC<FormProps> = ({
         />
 
         <StyledDescription
-          underlineColor={colorByPriority[priority]}
+          underlineColor={priorityColor}
           onChange={onChangeEventTextField("description")}
           onKeyDown={ignoreDelete}
           placeholder="Description"
           value={event.description || ""}
         />
 
-        <SaveSection priority={priority} onSubmit={onSubmitForm} />
+        <SaveSection
+          priority={priority || Priorities.UNASSIGNED}
+          onSubmit={onSubmitForm}
+        />
       </StyledEventForm>
     </FocusTrap>
   );


Test patch:
diff --git a/packages/web/src/__tests__/__mocks__/mock.render.tsx b/packages/web/src/__tests__/__mocks__/mock.render.tsx
index 88f574d6..917c9521 100644
--- a/packages/web/src/__tests__/__mocks__/mock.render.tsx
+++ b/packages/web/src/__tests__/__mocks__/mock.render.tsx
@@ -11,6 +11,7 @@ import { sagaMiddleware } from "@web/common/store/middlewares";
 import { reducers } from "@web/store/reducers";
 import { ThemeProvider } from "styled-components";
 import { theme } from "@web/common/styles/theme";
+import { GlobalStyle } from "@web/components/GlobalStyle";
 
 const customRender = (
   ui: ReactElement,
@@ -32,6 +33,7 @@ const customRender = (
     return (
       <DndProvider backend={HTML5Backend}>
         <GoogleOAuthProvider clientId="anyClientId">
+          <GlobalStyle />
           <ThemeProvider theme={theme}>
             <BrowserRouter>
               <Provider store={store}>{children}</Provider>
diff --git a/packages/web/src/__tests__/__mocks__/tabbable.js b/packages/web/src/__tests__/__mocks__/tabbable.js
new file mode 100644
index 00000000..2ebc0efc
--- /dev/null
+++ b/packages/web/src/__tests__/__mocks__/tabbable.js
@@ -0,0 +1,34 @@
+const lib = jest.requireActual("tabbable");
+
+/*
+Mocks the 'tabbable' library, used by focus-trap
+
+https://github.com/focus-trap/tabbable 
+
+https://stackoverflow.com/questions/72762696/jest-error-your-focus-trap-must-have-at-least-one-container-with-at-least-one
+*/
+const tabbable = {
+  ...lib,
+  tabbable: (node, options) =>
+    lib.tabbable(node, {
+      ...options,
+      displayCheck: "none",
+    }),
+  focusable: (node, options) =>
+    lib.focusable(node, {
+      ...options,
+      displayCheck: "none",
+    }),
+  isFocusable: (node, options) =>
+    lib.isFocusable(node, {
+      ...options,
+      displayCheck: "none",
+    }),
+  isTabbable: (node, options) =>
+    lib.isTabbable(node, {
+      ...options,
+      displayCheck: "none",
+    }),
+};
+
+module.exports = tabbable;
diff --git a/packages/web/src/views/Forms/EventForm/EventForm.test.tsx b/packages/web/src/views/Forms/EventForm/EventForm.test.tsx
new file mode 100644
index 00000000..2bb993b9
--- /dev/null
+++ b/packages/web/src/views/Forms/EventForm/EventForm.test.tsx
@@ -0,0 +1,64 @@
+/* eslint-disable testing-library/no-unnecessary-act */
+import React, { act } from "react";
+import { screen } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import { Schema_Event } from "@core/types/event.types";
+import { render } from "@web/__tests__/__mocks__/mock.render";
+import userEvent from "@testing-library/user-event";
+
+import { EventForm } from "./EventForm";
+
+test("start date picker opens and then closes when clicking the end input", async () => {
+  const allDayEvent: Schema_Event = {
+    title: "Ski all day",
+    startDate: "2025-01-01",
+    endDate: "2025-01-02",
+    isAllDay: true,
+  };
+  const mockOnClose = jest.fn();
+  const mockOnConvert = jest.fn();
+  const mockOnSubmit = jest.fn();
+  const mockSetEvent = jest.fn();
+
+  render(
+    <div>
+      <EventForm
+        event={allDayEvent}
+        onClose={mockOnClose}
+        onConvert={mockOnConvert}
+        onSubmit={mockOnSubmit}
+        setEvent={mockSetEvent}
+      />
+    </div>
+  );
+
+  await _clickStartInput();
+
+  // Check if the date picker is open
+  expect(
+    screen.getByRole("combobox", { name: /datepicker/i })
+  ).toBeInTheDocument();
+
+  await _clickEndInput();
+
+  // Check if the date picker is closed
+  //   expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+});
+
+const _clickStartInput = async () => {
+  const startDateInput = screen.getByRole("textbox", {
+    name: /pick start date/i,
+  });
+  await act(async () => {
+    await userEvent.click(startDateInput);
+  });
+};
+
+const _clickEndInput = async () => {
+  const endDateInput = screen.getByRole("textbox", {
+    name: /pick end date/i,
+  });
+  await act(async () => {
+    await userEvent.click(endDateInput);
+  });
+};