How to Use Keyboard Shortcuts in Retool

1// Essential editor shortcuts (Mac / Windows):
2// Save app:             Cmd+S        / Ctrl+S
3// Undo canvas change:   Cmd+Z        / Ctrl+Z
4// Redo:                 Cmd+Shift+Z  / Ctrl+Y
5// Run selected query:   Cmd+Enter    / Ctrl+Enter
6// Preview app:          Cmd+Shift+P  / Ctrl+Shift+P
7// Command palette:      Cmd+K        / Ctrl+K
8// Delete component:     Backspace / Delete (when component selected)
9// Duplicate component:  Cmd+D        / Ctrl+D
10// Multi-select:         Shift+click
11// Pan canvas:           Space + drag
12// Zoom in/out:          Cmd+= / Cmd+- (or scroll with Cmd held)

1// Text Input Inspector → Interaction → Event Handlers:
2// Event: Key press
3// Key: Enter
4// Action: Trigger query → submitForm
5
6// Add 'Only run when' condition to prevent submission while invalid:
7// Only run when: {{ !form1.invalid }}
8
9// For a search field — Enter triggers search:
10// Event: Key press
11// Key: Enter
12// Action: Trigger query → searchRecords

1// Event handler on any input inside the modal:
2// Event: Key press
3// Key: Escape
4// Action: Control component → modal1 → close
5
6// To also reset the form when escaping:
7// Add a second handler:
8// Event: Key press
9// Key: Escape
10// Action: Control component → form1 → reset
11
12// Note: Event handlers on the same event run in parallel
13// If you need sequential close then reset, use a JS Query:
14// Key press → Escape → Trigger query → closeAndResetModal
15
16// JS Query: closeAndResetModal
17form1.reset();
18modal1.close();

1// JS Query: setInitialFocus (Run on page load: ON)
2// Sets focus to the global shortcut catcher button
3keyboardFocusTrap.focus();
4
5// keyboardFocusTrap Button event handlers:
6// Event: Key press, Key: Ctrl+N / Cmd+N
7// Action: Control component → createModal → open
8
9// Event: Key press, Key: Ctrl+F / Cmd+F
10// Action: Control component → searchInput → focus
11
12// Event: Key press, Key: Escape
13// Action: Trigger query → closeAllModals
14
15// Note: Cmd+F is captured by the browser's Find function — 
16// use Ctrl+Shift+F or another combination to avoid browser conflicts

1// Known limitation: keyboard shortcuts in Custom Components
2// Key press events on Retool components are NOT fired when:
3// - Keyboard focus is inside a Custom Component (iframe)
4// - Keyboard focus is inside an embedded URL iframe
5// - The app is inside an iframe embed (external website)
6
7// Workaround for Custom Component shortcuts:
8// Handle keyboard events inside the Custom Component itself
9// using document.addEventListener('keydown', ...) in the component code
10// and communicate back to Retool via Retool.modelUpdate()
11
12// Example Custom Component keyboard handler:
13document.addEventListener('keydown', function(event) {
14  if (event.key === 'Enter' && !event.isComposing) {
15    Retool.modelUpdate({ enterPressed: true });
16  }
17});
18
19// Then in Retool, add a 'modelUpdate' event handler on the Custom Component
20// that triggers the desired action when enterPressed is true