Skip to content

Calendar: delete events with Delete/Backspace key and confirm with Enter - #544

Open
PeterMcBTC wants to merge 5 commits into
ProtonMail:mainfrom
PeterMcBTC:calendar-delete-shortcut
Open

PeterMcBTC wants to merge 5 commits into
ProtonMail:mainfrom
PeterMcBTC:calendar-delete-shortcut

Conversation

@PeterMcBTC

Copy link
Copy Markdown

Problem

Deleting an event in Proton Calendar currently requires the mouse twice:

  1. Click the trash icon in the event popover.
  2. Click the "Delete" button in the confirmation dialog.

Keyboard users have no way to do this: there is no shortcut to delete the
selected event, and pressing Enter in the delete confirmation dialog does not
confirm it. This is because Prompt deliberately excludes danger-colored
buttons from its Enter/Space submit hotkey (onSubmitHotkeyPress in
packages/components/components/prompt/Prompt.tsx), which is a sensible
default for destructive actions, but leaves no opt-in for flows where the
user explicitly wants keyboard-driven deletion.

Proposed solution

  1. Delete/Backspace deletes the selected event. While an event popover is
    open (i.e. an event is selected), pressing Delete or Backspace triggers
    exactly the same flow as clicking the trash icon (handleDelete in
    EventPopover). The hotkey is registered only while the popover is
    mounted, so it cannot fire when no event is selected. It respects the
    "Keyboard shortcuts" mail setting and the existing isBusy() guard
    (no-op while typing in inputs, or while a modal/dropdown is open).

  2. Enter confirms the deletion. A new opt-in prop
    enableDangerSubmitHotkey on Prompt allows the Enter hotkey to trigger
    the danger-colored CTA. It is enabled in DeleteConfirmModal and
    DeleteRecurringConfirmModal only — all other destructive prompts keep
    the current safe behavior. When enabled, only Enter is mapped; Space keeps
    its native behavior on the focused button, and preventDefault() avoids
    double-activation when the Cancel button is focused.

  3. The new shortcut is documented in the keyboard shortcuts help modal
    (packages/shared/lib/shortcuts/calendar.ts).

Resulting flow: click event → Supr → Enter → event deleted.

Files changed

  • packages/components/components/prompt/Prompt.tsx — new opt-in prop
    enableDangerSubmitHotkey (defaults to false, zero behavior change for
    existing consumers); the submit hotkey now calls preventDefault().
  • applications/calendar/src/app/containers/calendar/confirmationModals/DeleteConfirmModal.tsx
    — enable Enter-to-confirm for single-event deletion.
  • applications/calendar/src/app/containers/calendar/confirmationModals/DeleteRecurringConfirmModal.tsx
    — enable Enter-to-confirm for recurring-event deletion.
  • applications/calendar/src/app/components/events/EventPopover.tsx —
    Delete/Backspace hotkey scoped to the open popover.
  • packages/shared/lib/shortcuts/calendar.ts — document the new shortcut.

How to test

  1. Enable keyboard shortcuts in Settings → General → Keyboard shortcuts.
  2. Open the calendar, click an event to open its popover.
  3. Press Delete (or Backspace) → the delete confirmation dialog opens.
  4. Press Enter → the event is deleted.
  5. Regression checks:
    • With the dialog open, Space on the focused Cancel button still cancels.
    • Delete/Backspace do nothing while typing in an input/textarea.
    • Other Prompt-based dialogs (without the new prop) behave as before.
    • Events in non-writable calendars (no trash button) are unaffected.
@mmso
mmso force-pushed the main branch 6 times, most recently from 6cb99ea to a0a8848 Compare September 24, 2026 14:16
@mmso
mmso force-pushed the main branch 8 times, most recently from 57fccbd to c51e81b Compare October 1, 2026 20:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

1 participant