I’m working on a Figma plugin using React and I need the plugin window to automatically receive keyboard focus when it opens. Right now users have to click inside the plugin window before keyboard shortcuts work.
I’ve tried several different methods but haven’t found the correct solution yet. Does anyone know the proper way to handle this?
Just to clarify what I’m trying to do - I want to capture keyboard events for shortcuts without requiring users to manually click in the plugin window first. This isn’t about focusing on input fields, but rather making the entire plugin window responsive to keyboard shortcuts immediately when it launches.
Any help would be really appreciated!
I faced a similar challenge with my Figma plugin. To enable the plugin window to capture keyboard events immediately, ensure that you are calling window.focus() right after the UI renders. A useful approach is to incorporate setTimeout(() => window.focus(), 100) within the useEffect hook of your React component. This 100ms delay is crucial; calling focus too soon often results in Figma disregarding it. Additionally, consider setting tabIndex="-1" on your main container to improve focus handling. This method has proven effective across various Figma versions without interfering with the plugin’s functionality.
Had this exact issue last month! I fixed it by adding window.parent.focus() then window.focus() in componentDidMount. The parent call is crucial since Figma plugins run in nested iframes. Also, set your main div to tabindex="0" and call .focus() on it after mounting. Make sure you preventDefault on keydown events or Figma will intercept them.
Try using document.addEventListener with proper event handling. When I built my plugin, I found it’s better to attach keyboard listeners to the document object instead of specific elements. In your main component, add document.addEventListener('keydown', handleKeyPress) inside a useEffect hook and clean it up on unmount. The tricky part is Figma’s iframe environment can mess with standard focus behavior, so you might need to set autofocus on your root container div. This worked way better for me than trying to manipulate window focus directly - no timing delays that break on different systems.