🐛 Fix: Change Dates Using Keyboard and DatePicker (#287)

* 🐛 Fix: prevent form submission after pressing ENTER on date picker input

* ✨ feat: allow ENTER and arrows to work correctly on date picker

Focus Trap was preventing the date picker's keyboard events from being
captured.

* 🧹chore: Remove focus-trap-react

Removed unnecessary dependencies related to focus-trap, eslint-plugin-import, and other unused packages to clean up project dependencies.

* 🎨 Fix: Set default background color for DatePicker

* 🐛 Fix: Prevent multiple clicks needed for selecting date

- Remove index files for DatePicker and Input components
- Update import paths for DatePicker and Input
- Modify Focusable component to use setIsFocused instead of toggleFocused
- Adjust DatePicker input to use StyledInput

* 🐛 Fix: Prevent date changes from being overwritten after other changes

When changing a date and then changing another form field (like title), the date change was being lost. This makes sure that everytime the date is changed, the draft is updated.

* 🐛 Fix: Prevent mismatch between displayed date and internal date

Tracking these separately makes it possible to display user-friendly
dates, while also letting the date picker and backend use
backend-friendly dates, which save an all-day event like so:
start: 2025-03-03, end 2025-03-04

* 🐛 fix(checkpoint): prevent runtime error when moving start after end date

* 🧹 Chore: move date utils to web.datetime.util

* 🐛 fix(checkpoint): prevent runtime error when moving end before start

remove unnecessary adjustComplimentDateIfNeeded, preferring to do this logic on the onSelect handlers

* ✨ Feat: makes dates same after moving end before start

* 🧹 Chore: Cleanup comments and DatePickers code

* ♻️ Refactor: Simplify event form field updates

Modify event form field update logic to use a more concise and consistent approach:
- Simplify onSetEventField to accept a partial event object
- Update type definitions to match new implementation
- Adjust event field updates across multiple components to use new method

Author: tyler-dane

packages/web/package.json

@@ -19,7 +19,6 @@
     "classnames": "^2.3.1",
     "css-loader": "^6.3.0",
     "dayjs": "^1.10.7",
-    "focus-trap-react": "^10.3.0",
     "html-webpack-plugin": "^5.3.2",
     "http-server": "^14.1.0",
     "immutability-helper": "^3.1.1",

…ts__/utils/date.util/date.adjust.test.ts …utils/datetime/web.datetime.util.test.tspackages/web/src/__tests__/utils/date.util/date.adjust.test.ts renamed to packages/web/src/common/utils/datetime/web.datetime.util.test.ts packages/web/src/__tests__/utils/date.util/date.adjust.test.ts renamed to packages/web/src/common/utils/datetime/web.datetime.util.test.ts

@@ -1,7 +1,7 @@
 import {
   shouldAdjustComplimentDate,
   shouldAdjustComplimentTime,
-} from "@web/common/utils/web.date.util";
+} from "@web/common/utils/datetime/web.datetime.util";
 
 describe("Dates", () => {
   it("recognizes date adjustment after changing start", () => {

packages/web/src/common/utils/datetime/web.datetime.util.ts

@@ -0,0 +1,89 @@
+/**
+ * Utility functions for working with dates and times that are
+ * specific to the web app.
+ * Datetime utilities that apply to both backend and web
+ * should go in @core/
+ */
+import dayjs, { Dayjs } from "dayjs";
+import { YMDHAM_FORMAT } from "@core/constants/date.constants";
+import {
+  Params_DateChange,
+  Params_TimeChange,
+} from "@web/common/types/util.types";
+
+export const shouldAdjustComplimentDate = (
+  changed: "start" | "end",
+  vals: Params_DateChange,
+) => {
+  const { start, end } = vals;
+  const _start = dayjs(start);
+  const _end = dayjs(end);
+
+  let shouldAdjust = false;
+  let compliment = start;
+
+  if (changed === "start") {
+    shouldAdjust = _start.isAfter(_end);
+    if (shouldAdjust) {
+      compliment = start;
+    }
+  }
+
+  if (changed === "end") {
+    shouldAdjust = _end.isBefore(_start);
+
+    if (shouldAdjust) {
+      compliment = end;
+    }
+  }
+
+  return { shouldAdjust, compliment };
+};
+
+export const shouldAdjustComplimentTime = (
+  changed: "start" | "end",
+  vals: Params_TimeChange,
+) => {
+  let shouldAdjust: boolean;
+  let duration: number;
+  let step: number;
+  let compliment: Dayjs;
+
+  const { oldStart, oldEnd, start, end } = vals;
+
+  const _start = dayjs(`2000-01-01 ${start}`, YMDHAM_FORMAT);
+  const _end = dayjs(`2000-01-01 ${end}`, YMDHAM_FORMAT);
+  const isSame = _start.isSame(_end);
+
+  if (changed === "start") {
+    shouldAdjust = _start.isAfter(_end) || isSame;
+
+    if (shouldAdjust) {
+      const _oldStart = dayjs(`2000-01-01 ${oldStart}`, YMDHAM_FORMAT);
+      const _oldEnd = dayjs(`2000-01-01 ${oldEnd}`, YMDHAM_FORMAT);
+      duration = Math.abs(_oldStart.diff(_oldEnd, "minutes"));
+
+      step = Math.abs(_start.diff(_end, "minutes"));
+
+      compliment = dayjs(`2000-01-01 ${end}`, YMDHAM_FORMAT);
+    }
+  }
+
+  if (changed === "end") {
+    shouldAdjust = _end.isBefore(_start) || isSame;
+
+    if (shouldAdjust) {
+      const _oldStart = dayjs(`2000-01-01 ${oldStart}`, YMDHAM_FORMAT);
+      const _oldEnd = dayjs(`2000-01-01 ${oldEnd}`, YMDHAM_FORMAT);
+      duration = Math.abs(_oldStart.diff(_oldEnd, "minutes"));
+
+      step = Math.abs(_start.diff(_end, "minutes"));
+
+      compliment = dayjs(`2000-01-01 ${start}`, YMDHAM_FORMAT);
+    }
+  }
+
+  const adjustment = duration + step;
+
+  return { shouldAdjust, adjustment, compliment };
+};

packages/web/src/common/utils/web.date.util.ts

@@ -8,11 +8,7 @@ import {
   YMDHM_FORMAT,
 } from "@core/constants/date.constants";
 import { Categories_Event, Direction_Migrate } from "@core/types/event.types";
-import {
-  Option_Time,
-  Params_DateChange,
-  Params_TimeChange,
-} from "@web/common/types/util.types";
+import { Option_Time } from "@web/common/types/util.types";
 import { GRID_TIME_STEP } from "@web/views/Calendar/layout.constants";
 import { roundToNext } from ".";
 import { ACCEPTED_TIMES, OPTIONS_RECURRENCE } from "../constants/web.constants";
@@ -237,11 +233,9 @@ export const getCalendarHeadingLabel = (
 
 export const mapToBackend = (s: Schema_SelectedDates) => {
   if (s.isAllDay) {
-    const adjustedEnd = dayjs(s.endDate).add(1, "day");
-
     return {
       startDate: dayjs(s.startDate).format(YEAR_MONTH_DAY_FORMAT),
-      endDate: adjustedEnd.format(YEAR_MONTH_DAY_FORMAT),
+      endDate: dayjs(s.endDate).format(YEAR_MONTH_DAY_FORMAT),
     };
   }
 
@@ -250,83 +244,6 @@ export const mapToBackend = (s: Schema_SelectedDates) => {
   return { startDate, endDate };
 };
 
-export const shouldAdjustComplimentDate = (
-  changed: "start" | "end",
-  vals: Params_DateChange,
-) => {
-  let shouldAdjust: boolean;
-  let compliment: Date;
-
-  const { start, end } = vals;
-  const _start = dayjs(start);
-  const _end = dayjs(end);
-
-  if (changed === "start") {
-    shouldAdjust = _start.isAfter(_end);
-    if (shouldAdjust) {
-      compliment = start;
-    }
-  }
-
-  if (changed === "end") {
-    shouldAdjust = _end.isBefore(_start);
-
-    if (shouldAdjust) {
-      compliment = end;
-    }
-  }
-
-  return { shouldAdjust, compliment };
-};
-
-export const shouldAdjustComplimentTime = (
-  changed: "start" | "end",
-  vals: Params_TimeChange,
-) => {
-  let shouldAdjust: boolean;
-  let duration: number;
-  let step: number;
-  let compliment: Dayjs;
-
-  const { oldStart, oldEnd, start, end } = vals;
-
-  const _start = dayjs(`2000-01-01 ${start}`, YMDHAM_FORMAT);
-  const _end = dayjs(`2000-01-01 ${end}`, YMDHAM_FORMAT);
-  const isSame = _start.isSame(_end);
-
-  if (changed === "start") {
-    shouldAdjust = _start.isAfter(_end) || isSame;
-
-    if (shouldAdjust) {
-      const _oldStart = dayjs(`2000-01-01 ${oldStart}`, YMDHAM_FORMAT);
-      const _oldEnd = dayjs(`2000-01-01 ${oldEnd}`, YMDHAM_FORMAT);
-      duration = Math.abs(_oldStart.diff(_oldEnd, "minutes"));
-
-      step = Math.abs(_start.diff(_end, "minutes"));
-
-      compliment = dayjs(`2000-01-01 ${end}`, YMDHAM_FORMAT);
-    }
-  }
-
-  if (changed === "end") {
-    shouldAdjust = _end.isBefore(_start) || isSame;
-
-    if (shouldAdjust) {
-      const _oldStart = dayjs(`2000-01-01 ${oldStart}`, YMDHAM_FORMAT);
-      const _oldEnd = dayjs(`2000-01-01 ${oldEnd}`, YMDHAM_FORMAT);
-      duration = Math.abs(_oldStart.diff(_oldEnd, "minutes"));
-
-      step = Math.abs(_start.diff(_end, "minutes"));
-
-      compliment = dayjs(`2000-01-01 ${start}`, YMDHAM_FORMAT);
-    }
-  }
-
-  const adjustment = duration + step;
-
-  return { shouldAdjust, adjustment, compliment };
-};
-
 // uses inferred timezone and shortened string to
 // convert to a string format that the backend/gcal/mongo accepts:
 // '2022-02-04 12:15' -> '2022-02-04T12:15:00-06:00'

packages/web/src/components/DatePicker/DatePicker.tsx

@@ -7,8 +7,8 @@ import { isDark } from "@core/util/color.utils";
 import { theme } from "@web/common/styles/theme";
 import { Flex } from "@web/components/Flex";
 import { AlignItems, JustifyContent } from "@web/components/Flex/styled";
-import { Input } from "@web/components/Input";
 import { Text } from "@web/components/Text";
+import { StyledInput } from "../Input/styled";
 import {
   ChangeDayButtonsStyledFlex,
   MonthContainerStyled,
@@ -20,6 +20,7 @@ import {
 export interface Props extends ReactDatePickerProps {
   animationOnToggle?: boolean;
   bgColor?: string;
+  displayDate?: Date;
   inputColor?: string;
   isOpen?: boolean;
   onInputBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
@@ -34,7 +35,7 @@ export interface CalendarRef extends HTMLDivElement {
 export const DatePicker: React.FC<Props> = ({
   animationOnToggle = true,
   autoFocus: _autoFocus = false,
-  bgColor,
+  bgColor = theme.color.bg.primary,
   calendarClassName,
   inputColor,
   isOpen = true,
@@ -50,7 +51,7 @@ export const DatePicker: React.FC<Props> = ({
   const headerColor =
     view === "sidebar"
       ? theme.color.text.light
-      : isDark(bgColor)
+      : isDark(bgColor || "")
         ? theme.color.text.lighter
         : theme.color.text.dark;
 
@@ -79,7 +80,7 @@ export const DatePicker: React.FC<Props> = ({
           view={view}
         />
       )}
-      customInput={<Input bgColor={inputColor} onBlurCapture={onInputBlur} />}
+      customInput={<StyledInput bgColor={inputColor} />}
       dateFormat={"M-d-yyyy"}
       formatWeekDay={(day) => day[0]}
       open={isOpen}
@@ -96,7 +97,6 @@ export const DatePicker: React.FC<Props> = ({
         onSelect(date, event);
       }}
       portalId="root"
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       ref={datepickerRef as any}
       showPopperArrow={false}
       renderCustomHeader={({

packages/web/src/components/DatePicker/index.ts

@@ -12,7 +12,7 @@ export type Props<T extends ClassNamedComponent> = T &
     underlineColor?: string;
   };
 
-const _Focusable = <T,>(
+const _Focusable = <T extends ClassNamedComponent>(
   {
     autoFocus = false,
     Component,
@@ -22,16 +22,18 @@ const _Focusable = <T,>(
   }: Props<T>,
   ref: Ref<HTMLDivElement>,
 ) => {
-  const [isFocused, toggleFocused] = useState(autoFocus);
+  const [isFocused, setIsFocused] = useState(false);
   const rest = props as unknown as T;
 
   return (
     <>
       <Component
         {...rest}
         ref={ref}
-        onFocus={() => toggleFocused(true)}
-        onBlur={() => toggleFocused(false)}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => {
+          setIsFocused(false);
+        }}
         autoFocus={autoFocus}
       />
       {!!withUnderline && isFocused && <Divider color={underlineColor} />}

packages/web/src/components/Focusable/Focusable.tsx

@@ -2,7 +2,7 @@ import dayjs from "dayjs";
 import weekPlugin from "dayjs/plugin/weekOfYear";
 import React, { FC, useEffect, useState } from "react";
 import { ID_DATEPICKER_SIDEBAR } from "@web/common/constants/web.constants";
-import { DatePicker } from "@web/components/DatePicker";
+import { DatePicker } from "@web/components/DatePicker/DatePicker";
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
 import { MonthPickerContainer } from "./../styled";