diff --git a/js/desktop/src/features/compose/compose-overlay.tsx b/js/desktop/src/features/compose/compose-overlay.tsx index 9144fa2..c4a0bdd 100644 --- a/js/desktop/src/features/compose/compose-overlay.tsx +++ b/js/desktop/src/features/compose/compose-overlay.tsx @@ -595,6 +595,16 @@ export function ComposeOverlay({ const handleKeyDown = (e: KeyboardEvent) => { const currentStep = stepRef.current; + // Consume a key compose handles so it never reaches the stream's + // window-level navigation/action handlers. Without this, e.g. Escape + // while recording or reviewing would both cancel compose and exit the + // stream. Listening in the capture phase (see below) guarantees compose + // sees the key before those handlers regardless of registration order. + const consume = () => { + e.preventDefault(); + e.stopPropagation(); + }; + if ( currentStep === 'typing' || currentStep === 'task' || @@ -602,7 +612,7 @@ export function ComposeOverlay({ currentStep === 'picking' ) { if (e.key === 'Escape') { - e.preventDefault(); + consume(); cancel(); } return; @@ -620,19 +630,19 @@ export function ComposeOverlay({ switch (currentStep) { case 'idle': { if (e.key === '`' && !e.repeat) { - e.preventDefault(); + consume(); handleRecordIntent(); } else if (e.key === 's' || e.key === 'S') { - e.preventDefault(); + consume(); if (!guardIdle()) break; if (!requireDesktop('Screen recording')) break; setRecordingSource('screen'); setStepSync('picking'); } else if (e.key === 't' || e.key === 'T') { - e.preventDefault(); + consume(); handleTextIntent(); } else if (e.key === 'd' || e.key === 'D') { - e.preventDefault(); + consume(); handleTaskIntent(); } break; @@ -641,17 +651,17 @@ export function ComposeOverlay({ case 'recording': { if (e.key === '`' && !e.repeat) { // Second tap stops media recording (toggle mode) - e.preventDefault(); + consume(); handleStopIntent(); } else if ( (e.key === 's' || e.key === 'S') && recordingSourceRef.current === 'screen' ) { // S stops screen recording when main window is focused - e.preventDefault(); + consume(); handleStopIntent(); } else if (e.key === 'q' || e.key === 'Q' || e.key === 'Escape') { - e.preventDefault(); + consume(); handleCancelIntent(); } break; @@ -659,10 +669,10 @@ export function ComposeOverlay({ case 'reviewing': { if (e.key === 'q' || e.key === 'Q' || e.key === 'Escape') { - e.preventDefault(); + consume(); handleCancelIntent(); } else if (e.key === 'Enter') { - e.preventDefault(); + consume(); handleSendIntent(); } break; @@ -689,10 +699,13 @@ export function ComposeOverlay({ } }; - window.addEventListener('keydown', handleKeyDown); + // Capture phase so compose can consume keys before the stream's + // window-level navigation/action handlers (which listen in the bubble + // phase) see them. + window.addEventListener('keydown', handleKeyDown, true); window.addEventListener('keyup', handleKeyUp); return () => { - window.removeEventListener('keydown', handleKeyDown); + window.removeEventListener('keydown', handleKeyDown, true); window.removeEventListener('keyup', handleKeyUp); }; }, [