Skip to content

day: keyboard opening a focused calendar event crashes #1838

@tyler-dane

Description

@tyler-dane

Bug report

Day View can crash when a user opens a calendar event from the keyboard. The reporter first saw it after typing m: the event briefly receives focus, then React Router shows Unexpected Application Error with Maximum update depth exceeded. The same crash also happens when the user presses i to focus a calendar event and then presses Enter, so this is not only an m shortcut issue.

Where it happened

Production web app at /day/2026-05-30 (https://app.compasscalendar.com/day/2026-05-30) on the Day View calendar agenda. Screenshot shows Chrome on macOS, Saturday May 30, 2026, with the default React Router error boundary.

Workflow

  1. Navigate to Day View for a date that has at least one calendar event.
  2. Trigger either keyboard-open path:
    • Press m while the Day View calendar is visible, or
    • Press i to focus a calendar event, then press Enter.
    • Open cmd palette and select the 'Edit event' option
  3. The event focuses briefly, then the app crashes into React Router's default error page.

Expected outcome

Keyboard event editing should open the existing event in the floating event form without crashing. m and i + Enter should preserve the keyboard workflow and focus behavior.

Screenshot

[screenshot]

Diagnosis

Reproduction status: reported from production with screenshot and console stack. I did not reproduce against a logged-in production account locally, but the reporter confirmed two keyboard paths with the same symptom.

Strongest evidence:

  • Console log from the attached paste reports Uncaught Error: Maximum update depth exceeded in chunk-pkmxza4p.js, followed by Error handled by React Router default ErrorBoundary and a React warning that a component is likely calling state from an effect whose dependencies change every render.
  • The Day View m shortcut is registered in packages/web/src/views/Day/hooks/shortcuts/useDayViewShortcuts.ts and calls onEditEvent.
  • onEditEvent is wired from packages/web/src/views/Day/view/DayViewContent.tsx to openEventFormEditEvent in packages/web/src/views/Day/interaction/dayCalendarFocus.util.ts.
  • openEventFormEditEvent resolves the focused, hovered, or first visible Day calendar event, calls focusDayCalendarEventTarget(target), then dispatches a synthetic bubbling KeyboardEvent("keydown", { key: "Enter" }) to the event element.
  • Pressing i followed by Enter reaches the same underlying open-existing-event path naturally: i focuses the first Day calendar event, and the event card's onKeyDown opens it on Enter in packages/web/src/common/calendar-grid/components/CalendarTimedEventCard.tsx / CalendarAllDayEventCard.tsx.
  • The open path dispatches draftSlice.actions.startGridClick(...) and then opens the floating form from packages/web/src/views/Day/components/Calendar/DayCalendarGrid.tsx. The likely loop is in the interaction between keyboard focus, event-card focus state/registration, draft state, and Floating UI focus/open state rather than in the m shortcut itself.

Relevant duplicate search:

Confidence: medium. The crash is real and reporter-confirmed; the precise looping component still needs source-map or local reproduction confirmation.

Likely fix

Start in the Day keyboard event-open flow, not just the m handler. Reproduce with both m and i + Enter, then inspect the cycle across:

  • packages/web/src/views/Day/interaction/dayCalendarFocus.util.ts
  • packages/web/src/views/Day/components/Calendar/DayCalendarGrid.tsx
  • packages/web/src/views/Day/components/Calendar/DayCalendarEventCards.tsx
  • packages/web/src/components/FloatingEventForm/FloatingEventForm.tsx
  • packages/web/src/common/hooks/useOpenAtCursor.ts
  • packages/web/src/common/hooks/useFloatingAtCursor.ts

Preserve keyboard behavior: i should focus a usable event target; Enter on a focused event should open the form; m should open the currently focused or hovered event, falling back to the first visible event. Avoid a fix that only special-cases m, because the same crash occurs through direct focused-card Enter.

Verification

  • Add/extend a focused web test for Day View keyboard event opening: render Day View with at least one event, press i, press Enter, and assert the event form opens without Maximum update depth/React error output.
  • Add/extend coverage for pressing m from Day View with an event present and assert the same successful open behavior.
  • Manual check in the browser on /day/<date-with-event>: verify m opens the event form, and i then Enter opens the same form without crashing.

Narrow verification already run during capture:

cd packages/web && bun test src/views/Day/interaction/dayCalendarFocus.util.test.ts src/views/Day/components/Calendar/DayCalendarGrid.test.tsx

Result: 13 pass, 0 fail. These existing tests do not cover the failing keyboard-open sequence.

Metadata

Metadata

Assignees

Labels

webFrontend/web related issue

Type

No fields configured for Bug.

Projects

Status
Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions