I'm working on a Retool app and I want to enable a component (e.g. a button or input) when the user presses the Escape (Esc) key.
My current idea is to change a temporary state value from true to false when Esc is pressed, and use that to control the disabled state of a component. But I don't really understand how to detect keyboard input like Escape in Retool.
Is there a recommended way to do this?
Can Escape key events be captured in Retool natively?
Retool doesn’t have a built-in way to listen for key presses like Escape, but there is a solid workaround. What you can do is drop in a small Custom Component that listens for keyboard events using JavaScript. When it detects the Escape key, it sends a message back to your app using postMessage. Then you can use an event handler in Retool to update a temporary state or trigger something based on that.
Yes, you can detect key presses like Escape in Retool using custom keyboard shortcuts. There's a feature for this built right into the App Inspector (top-right of the editor panel). You can define custom shortcuts and then trigger any Retool action (like setting temporary state) when a key is pressed.
I added a custom JavaScript query with lock_table.setValue('none'), and I set up the alt+q shortcut to trigger it so that the lock can be removed. The JavaScript query works perfectly when I run it manually, but the shortcut doesn't seem to trigger the query.
As you can see in the screenshot, I've added the shortcut under the page-level custom shortcuts, and the query name matches exactly.
Do you have any idea what might be causing the shortcut not to work?
Hey! I think the issue might be with the action you're using in the shortcut setup. Instead of just unlockTable_esc, try using unlockTable_esc.trigger() to actually run the query. That should do the trick!
