Adding a Global Keyboard Shortcut Before Context Checks

TLDR

Registering global state toggles inside context guards (like isTableContext()) prevents keyboard shortcuts from firing when focus sits outside the primary table viewport. Placing global shortcuts before context checks ensures shortcuts like Alt+D work consistently regardless of focus location.

Shortcut Registration Strategy	Evaluation Placement	Behaviors Outside Table Focus	User Accessibility
Inside Context Guard	After isTableContext() check	Fails silently (Shortcuts ignored)	Broken (Requires prior cell click)
Global Pre-Guard Check	Before isTableContext() check	Toggles drag mode everywhere	100% Accessible anywhere

---

Context guards inside global listeners ignore shortcuts outside focus areas

We wanted to give users a fast keyboard shortcut (Alt+D) to toggle drag-and-drop cell reordering across the table. When drag mode is active, dragging moves entire rows and columns. When disabled, dragging selects cell ranges.

The initial implementation placed the shortcut listener behind a focus check:

document.addEventListener('keydown', (e) => {
    // Context check ran first
    if (!isTableContext()) return;
if (e.altKey && e.key === 'd') {         toggleDragMode();     } });

Because isTableContext() verifies that keyboard focus sits inside an active table cell, pressing Alt+D while focused on the toolbar, modal dialogs, or sidebar controls triggered an early return. The event was silently ignored, forcing users to click inside a cell before using the keyboard toggle.

---

Separating global toggles from contextual commands restores shortcut access

To fix this, we separated global modal toggles from contextual editing commands. Global shortcuts now execute before any focus validation runs:

document.addEventListener('keydown', (e) => {
    // 1. Global state toggles fire from any focus state
    if (e.altKey && e.key === 'd') {
        e.preventDefault();
        toggleDragMode();
        return;
    }
// 2. Context-specific commands follow the focus check     if (!isTableContext()) return;
if (e.key === 'Delete') deleteSelectedCells();     if (e.ctrlKey && e.key === 'c') copySelected(); });

Calling e.preventDefault() prevents native browser shortcut collisions, while placing the toggle at the top of the event listener ensures users can switch modes from anywhere on the page.

Misplaced Guard (Broken Flow):
Keydown (Alt+D) -> [isTableContext()] --No--> (Exit: Shortcut Ignored!)
                           |
                          Yes
                           v
                    [Toggle Drag]
Correct Event Routing (Adopted Flow): Keydown (Alt+D) -> Is Alt+D? --Yes--> [Toggle Drag] (Immediate Execution)                         |                        No                         v                  [isTableContext()] --No--> (Exit: Command Ignored)                         |                        Yes                         v                  [Table Commands]

Rule of thumb: Place application-wide state toggles at the top of keydown listeners before contextual focus guards.