fix(web): close ends-on datepicker on outside click (#2741)

* fix(web): close ends-on datepicker on outside click

EventForm stops mousedown bubbling, which blocked react-datepicker's
bubble-phase outside-click handler. Close grid DatePicker popovers via a
capture-phase listener so Ends on dismisses when focus leaves.

Co-authored-by: Tyler Dane <tyler-dane@users.noreply.github.com>

* test(web): harden ends-on outside-click assertion

Use findAll/queryAll for day cells and drop an unused React import.

Co-authored-by: Tyler Dane <tyler-dane@users.noreply.github.com>

* fix(web): open ends-on picker via input click only

TooltipTrigger onClick re-opened the calendar when a day selection
bubbled from the local portal. Match start/end pickers and open from
onInputClick/onCalendarOpen instead.

Co-authored-by: Tyler Dane <tyler-dane@users.noreply.github.com>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Tyler Dane <tyler-dane@users.noreply.github.com>

Author: tyler-dane

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

@@ -1,6 +1,6 @@
 import classNames from "classnames";
 import type React from "react";
-import { useId } from "react";
+import { useEffect, useId, useRef } from "react";
 import * as ReactDatePickerModule from "react-datepicker";
 import { type ReactDatePickerProps } from "react-datepicker";
 import dayjs from "@core/util/date/dayjs";
@@ -62,9 +62,37 @@ export const DatePicker: React.FC<Props> = (datePickerProps) => {
     ...props
   } = datePickerProps;
   const layerId = useId();
+  const calendarRef = useRef<HTMLDivElement>(null);
+  const onCalendarCloseRef = useRef(datePickerProps.onCalendarClose);
+  onCalendarCloseRef.current = datePickerProps.onCalendarClose;
   // Sidebar month grid stays mounted and visible; only transient grid popovers
   // own Escape (same carve-out the old DOM probe encoded via Month picker).
   useFloatingLayer(`datePicker:${layerId}`, view === "grid" && isOpen);
+  // EventForm (and similar shells) stop mousedown bubbling so grid clicks
+  // underneath don't fire. That also blocks react-datepicker's document
+  // bubble-phase outside-click listener. Capture-phase closes grid popovers
+  // even when a parent calls stopPropagation.
+  useEffect(() => {
+    if (view !== "grid" || !isOpen) return;
+
+    const onMouseDownCapture = (event: MouseEvent) => {
+      const target = event.target;
+      if (!(target instanceof Node)) return;
+      if (calendarRef.current?.contains(target)) return;
+
+      const input = document.querySelector(
+        `[data-datepicker-input="${CSS.escape(layerId)}"]`,
+      );
+      if (input?.contains(target)) return;
+
+      onCalendarCloseRef.current?.();
+    };
+
+    document.addEventListener("mousedown", onMouseDownCapture, true);
+    return () => {
+      document.removeEventListener("mousedown", onMouseDownCapture, true);
+    };
+  }, [isOpen, layerId, view]);
   const isDarkTheme = useThemeStore(selectTheme) === "dark-abyss";
   const resolvedBgColor =
     bgColor ?? (isDarkTheme ? colors.background : lightColors.background);
@@ -98,6 +126,7 @@ export const DatePicker: React.FC<Props> = (datePickerProps) => {
       })}
       calendarContainer={({ children, className }) => (
         <div
+          ref={calendarRef}
           className={classNames("c-date-picker", className)}
           data-dark={usesThemeText}
           data-view={view}
@@ -114,6 +143,7 @@ export const DatePicker: React.FC<Props> = (datePickerProps) => {
             "w-28 transition-colors duration-300",
             inputClassName,
           )}
+          data-datepicker-input={layerId}
           style={{
             backgroundColor: inputColor,
             color: inputColor ? theme.getContrastText(inputColor) : undefined,
@@ -128,7 +158,8 @@ export const DatePicker: React.FC<Props> = (datePickerProps) => {
       {...props}
       // Close the picker when the user clicks away (react-datepicker has no
       // onCalendarClose for outside-clicks). onCalendarOpen/onCalendarClose/
-      // onSelect flow straight through {...props}.
+      // onSelect flow straight through {...props}. Kept as a fallback for
+      // contexts where bubble-phase delivery still reaches document.
       onClickOutside={() => {
         datePickerProps.onCalendarClose?.();
       }}

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

@@ -70,8 +70,13 @@ const recurringDraft = () => {
 
 function renderRecurrenceSection({
   initialDraft = baseDraft(),
+  withFormLikeStopPropagation = false,
 }: {
   initialDraft?: GridEventDraft;
+  // EventForm stops mousedown bubbling so week-grid handlers underneath do
+  // not fire. That also breaks react-datepicker's bubble-phase outside-click
+  // listener; opt in to reproduce that shell when testing popover close.
+  withFormLikeStopPropagation?: boolean;
 } = {}) {
   const setDraftSpy = mock();
 
@@ -89,7 +94,23 @@ function renderRecurrenceSection({
       });
     }, []);
 
-    return <RecurrenceSection draft={draft} setDraft={handleSetDraft} />;
+    const section = (
+      <RecurrenceSection draft={draft} setDraft={handleSetDraft} />
+    );
+
+    if (!withFormLikeStopPropagation) return section;
+
+    return (
+      // biome-ignore lint/a11y/noStaticElementInteractions: test harness mirrors EventFormShell's mousedown stopPropagation.
+      <div
+        onMouseDown={(event) => {
+          event.stopPropagation();
+        }}
+      >
+        {section}
+        <button type="button">Outside</button>
+      </div>
+    );
   }
 
   const view = render(<Harness />);
@@ -158,6 +179,38 @@ describe("RecurrenceSection", () => {
     expect(ownDate.getAttribute("aria-disabled")).not.toBe("true");
   });
 
+  // Regression: EventFormShell stops mousedown bubbling, which used to leave
+  // the Ends on calendar open after an outside click (focus left, popover stayed).
+  it("closes the Ends on picker on outside click when mousedown propagation is stopped", async () => {
+    const user = userEvent.setup();
+    renderRecurrenceSection({
+      initialDraft: recurringDraft(),
+      withFormLikeStopPropagation: true,
+    });
+
+    await user.click(await screen.findByRole("textbox"));
+    expect(
+      (await screen.findAllByLabelText(/Choose .*2026/i)).length,
+    ).toBeGreaterThan(0);
+
+    await user.click(screen.getByRole("button", { name: "Outside" }));
+
+    expect(screen.queryAllByLabelText(/Choose .*2026/i)).toHaveLength(0);
+  });
+
+  // Regression: opening via TooltipTrigger onClick re-opened the popover when a
+  // day click bubbled from the local portal; open only via the input path.
+  it("closes the Ends on picker after selecting a day", async () => {
+    const user = userEvent.setup();
+    renderRecurrenceSection({ initialDraft: recurringDraft() });
+
+    await user.click(await screen.findByRole("textbox"));
+    const [day] = await screen.findAllByLabelText(/^Choose /);
+    await user.click(day);
+
+    expect(screen.queryAllByLabelText(/^Choose /)).toHaveLength(0);
+  });
+
   it("turning off Repeat on an existing recurring event clears the controls", async () => {
     // Guards against the toggle being a no-op on an edit draft: clearing
     // recurrence used to resolve to "preserve", which read the source

packages/web/src/views/Forms/EventForm/DateControlsSection/RecurrenceSection/components/EndsOnDate.tsx

@@ -1,4 +1,3 @@
-import type React from "react";
 import { useMemo, useState } from "react";
 import { parseCompassEventDate } from "@core/util/event/event.util";
 import { DatePicker } from "@web/components/DatePicker/DatePicker";
@@ -31,18 +30,20 @@ export const EndsOnDate = ({
           borderBottomStyle: "solid",
         }}
       >
-        <TooltipWrapper
-          description="Select recurrence end date"
-          onClick={() => setOpen(true)}
-        >
+        <TooltipWrapper description="Select recurrence end date">
           <div id="portal">
             <DatePicker
               calendarClassName="recurrenceUntilDatePicker"
               isOpen={open}
               minDate={miniDate.toDate()}
               onCalendarClose={() => setOpen(false)}
+              onCalendarOpen={() => setOpen(true)}
               onChange={() => null}
-              onSelect={(date) => setUntil(date)}
+              onInputClick={() => setOpen(true)}
+              onSelect={(date) => {
+                setUntil(date);
+                setOpen(false);
+              }}
               selected={until}
               title="Select recurrence end date"
               view="grid"