refactor(web): implement cancel edit functionality in SomedayRecurrenceSection

Author: tyler-dane

packages/web/src/views/Forms/EventForm/DateControlsSection/RecurrenceSection/SomedayRecurrenceSection/SomedayRecurrenceSection.test.tsx

@@ -249,4 +249,34 @@ describe("SomedayRecurrenceSection", () => {
     const value = await screen.findByTestId("someday-recurrence-value");
     expect(value).toHaveTextContent(/Repeats every Week/i);
   });
+
+  it("closes select on escape and restores original recurrence", async () => {
+    const eventWithRecurrence = {
+      ...baseSomedayEvent,
+      recurrence: { rule: ["RRULE:FREQ=WEEKLY;COUNT=5"] },
+    };
+    renderSection(eventWithRecurrence);
+
+    const initialCalls = mockSetEvent.mock.calls.length;
+    const control = await openRecurrenceDropdown();
+    const input = control.querySelector("input") as HTMLElement | null;
+    fireEvent.keyDown(input ?? control, { key: "Escape", code: "Escape" });
+
+    expect(mockSetEvent.mock.calls.length).toBe(initialCalls);
+    expect(screen.getByText(/Repeats every Week/i)).toBeInTheDocument();
+  });
+
+  it("closes select on escape when no recurrence is set", async () => {
+    renderSection();
+
+    const initialCalls = mockSetEvent.mock.calls.length;
+    const control = await openRecurrenceDropdown();
+    const input = control.querySelector("input") as HTMLElement | null;
+    fireEvent.keyDown(input ?? control, { key: "Escape", code: "Escape" });
+
+    expect(mockSetEvent.mock.calls.length).toBe(initialCalls);
+    expect(
+      screen.getByRole("button", { name: /edit recurrence/i }),
+    ).toHaveTextContent(/^Repeat$/i);
+  });
 });

packages/web/src/views/Forms/EventForm/DateControlsSection/RecurrenceSection/SomedayRecurrenceSection/SomedayRecurrenceSection.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction } from "react";
+import React, { Dispatch, SetStateAction, useRef } from "react";
 import { Frequency } from "rrule";
 import { Schema_Event } from "@core/types/event.types";
 import { RepeatIcon } from "@web/components/Icons/Repeat";
@@ -27,6 +27,7 @@ export const SomedayRecurrenceSection = ({
   const [menuIsOpen, setMenuIsOpen] = React.useState<boolean | undefined>(
     undefined,
   );
+  const initialStateRef = useRef({ hasRecurrence, freq });
 
   const handleSelect = (option: SomedayFrequencyOption) => {
     if (option.value === Frequency.DAILY) {
@@ -55,10 +56,27 @@ export const SomedayRecurrenceSection = ({
   };
 
   const openSelect = () => {
+    initialStateRef.current = { hasRecurrence, freq };
     setIsEditing(true);
     setMenuIsOpen(true);
   };
 
+  const cancelEdit = () => {
+    const { hasRecurrence: initialHasRecurrence, freq: initialFreq } =
+      initialStateRef.current;
+
+    if (hasRecurrence !== initialHasRecurrence) {
+      toggleRecurrence();
+    }
+
+    if (freq !== initialFreq) {
+      setFreq(initialFreq);
+    }
+
+    setIsEditing(false);
+    setMenuIsOpen(undefined);
+  };
+
   const shouldShowSelect = hasRecurrence || isEditing;
 
   return (
@@ -71,6 +89,7 @@ export const SomedayRecurrenceSection = ({
           onSelect={handleSelect}
           menuIsOpen={menuIsOpen}
           onMenuClose={handleMenuClose}
+          onCancel={cancelEdit}
         />
       ) : (
         <StyledRepeatTextContainer

packages/web/src/views/Forms/EventForm/DateControlsSection/RecurrenceSection/SomedayRecurrenceSection/SomedayRecurrenceSelect/SomedayRecurrenceSelect.tsx

@@ -3,6 +3,7 @@ import ReactSelect, { SelectInstance, SingleValueProps } from "react-select";
 import { components } from "react-select";
 import { Frequency } from "rrule";
 import { useTheme } from "styled-components";
+import { Key } from "ts-key-enum";
 import { brighten, darken } from "@core/util/color.utils";
 import { theme } from "@web/common/styles/theme";
 import { RepeatIcon } from "@web/components/Icons/Repeat";
@@ -32,13 +33,15 @@ export const SomedayRecurrenceSelect = ({
   onSelect,
   menuIsOpen,
   onMenuClose,
+  onCancel,
 }: {
   bgColor: string;
   hasRecurrence: boolean;
   freq: FrequencyValues;
   onSelect: (option: SomedayFrequencyOption) => void;
   menuIsOpen?: boolean;
   onMenuClose?: () => void;
+  onCancel?: () => void;
 }) => {
   const fontSize = theme.text.size.m;
   const bgBright = brighten(bgColor);
@@ -61,6 +64,13 @@ export const SomedayRecurrenceSelect = ({
   }, [menuIsOpen]);
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === Key.Escape) {
+      event.preventDefault();
+      event.stopPropagation();
+      onCancel?.();
+      return;
+    }
+
     if (event.key !== "Enter") {
       return;
     }